Twitter bootstrap 引导行文本向下推列

我对使用twitter bootstrap 3.0的简单布局有一些问题。当我的内容中有太多文本时，就会出现问题，它会将conent往下推。我不确定我是否把事情安排得很好。这是我的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>

字段：

字段：

字段：

字段

我希望得到这样的输出（如果文本很短，我会这样做）

相反，它显示为

---

我想我可以通过每三条记录创建一个class=“row”的新div来解决这个问题，但我认为我真的不应该这么做。也许我在这个用例中错误地使用了网格系统。我的目的是得到一个反应灵敏的设计，可以在较小的屏幕上垂直显示。这就是我为什么不使用桌子的原因。感谢您的帮助。如果我需要提供更多信息，请告诉我。

使用固定网格列类，如“col-md-2”，用于一行中的所有这三个内容div，并使用“col-md-offset-1”在它们之间设置偏移量，这将在它们之间留出空间，并且您的内容的文本将永远不会像上图中那样传播，保持固定的宽度。

我想我不确定这会有什么帮助。col-md-2将使每件物品都更薄，并推动导致问题的高度。我试过你说的了。它只是让每行出现更多的项目，并加剧了问题。你能举个简单的例子吗？也许我没有正确理解，然后指定一个固定的高度，并使用css溢出隐藏，这也将帮助您保持高度可能需要工作。这是一种不同的方法是的，使用Knockout.js确实是一种很好的方法