0

I'm having some issues with a simple layout using twitter bootstrap 3.0. The issue occurs when I have too much text in my content, and it pushes conent down. I'm not sure I'm structuring things quite properly. Here's my HTML

<div data-bind="foreach: items" class="row">
        <div class="col-sm-4" >
            <div >
                <div>
                    <strong>Field:</strong> <span data-bind="text: Field"></span><br />
                    <strong>Field:</strong> <span data-bind="text: Field"></span><br />
                    <strong>Field:</strong> <span data-bind="text: Field"></span><br />
                    <strong data-bind="text: Field">Field</strong>
                </div>
                <div class="container">
                    <img class="img-rounded" data-bind="attr: { src: Field}" />
                </div>
                <div >
                    <button type="button" class="btn btn-danger btn-sm" id="dislike" >
                        <span class="glyphicon glyphicon-thumbs-down"></span>
                    </button>
                    <button type="button" class="btn btn-success btn-sm">
                        <span class="glyphicon glyphicon-thumbs-up"></span>
                    </button>
                    <audio class="audioStream" oncanplay="" preload="none">
                        <source src="" />
                    </audio>
                    <button type="button" class="btn btn-primary btn-sm audioPlayer">
                        <span class="glyphicon glyphicon-play audioPlayerIcon"></span>
                    </button>
                </div>
            </div>
        </div>

I'm expecting to get output like this (Which I do if the text is short) expected

Instead it shows up like longer list

I imagine I could probably fix the issue by making a new div with class="row" every three records, but I don't think I should really have to do that. Perhaps I'm using the grid system incorrectly with this use case. My intent was to get a responsive design that would turn vertical on smaller screens. This is why I didn't use tables. Any help is appreciated. If I need to provide more info, let me know.

Chris Cap
  • 1,056
  • 3
  • 13
  • 21

1 Answers1

1

Use fixed grid columns classes like "col-md-2" for all these three content divs in a line with a offset between each of them by using "col-md-offset-1", this will give spaces between them and your content's text will never spread like in above image maintaining the fixed width.

Ali Shahzad
  • 5,163
  • 7
  • 36
  • 64
  • I guess I'm not exactly sure how that'll help. col-md-2 will make everything skinnier and push the height which is what is causing the issue. I did try what you're saying. It just made more items appear per line and exacerbated the issue. Can you give a quick example? Maybe I'm not understanding correctly – Chris Cap Nov 13 '13 at 05:49
  • then assign a fixed height and use css overflow to hidden that will also help you to maintain the height may be – Ali Shahzad Nov 13 '13 at 06:01
  • Seems to work. So did this http://stackoverflow.com/questions/12124835/using-knockout-to-populate-bootstrap-rows-and-spans which is a different approach – Chris Cap Nov 13 '13 at 06:09
  • Yeah, this is really a nice approach using Knockout.js – Ali Shahzad Nov 13 '13 at 06:17