Bootstrap 行文本向下推列 [英] Bootstrap row text pushing columns down
问题描述
我在使用 twitter bootstrap 3.0 进行简单布局时遇到了一些问题.当我的内容中有太多文本时会出现问题,并且会降低内容.我不确定我是否正确地构建了事物.这是我的 HTML
<div class="col-sm-4" ><div ><div><strong>字段:</strong><span data-bind="text: Field"></span><br/><strong>字段:</strong><span data-bind="text: Field"></span><br/><strong>字段:</strong><span data-bind="text: Field"></span><br/><strong data-bind="text: Field">Field<div class="容器"><img class="img-rounded" data-bind="attr: { src: Field}"/>
<div ><button type="button" class="btn btn-danger btn-sm" id="dislike" ><span class="glyphicon glyphicon-thumbs-down"></span>按钮><button type="button" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-thumbs-up"></span>按钮><audio class="audioStream" oncanplay="" preload="none"><source src=""/>音频><button type="button" class="btn btn-primary btn-sm audioPlayer"><span class="glyphicon glyphicon-play audioPlayerIcon"></span>按钮>
我期待得到这样的输出(如果文本很短,我会这样做)
而是显示为
我想我可以通过每三个记录创建一个 class="row" 的新 div 来解决这个问题,但我认为我真的不应该这样做.也许我在这个用例中错误地使用了网格系统.我的目的是获得一种响应式设计,可以在较小的屏幕上垂直显示.这就是我没有使用表格的原因.任何帮助表示赞赏.如果我需要提供更多信息,请告诉我.
对所有这三个内容 div 使用固定网格列类,如col-md-2",在一行中使用col"-md-offset-1",这将在它们之间留出空间,并且您的内容文本永远不会像上图那样展开,保持固定宽度.
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)
Instead it shows up like
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.
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.
这篇关于Bootstrap 行文本向下推列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!