0

我在使用 twitter bootstrap 3.0 进行简单布局时遇到了一些问题。当我的内容中有太多文本时会出现此问题，并且它会降低内容。我不确定我的结构是否正确。这是我的 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 来解决这个问题，但我认为我真的不应该这样做。也许我在这个用例中错误地使用了网格系统。我的意图是获得一个响应式设计，可以在较小的屏幕上垂直。这就是我不使用表格的原因。任何帮助表示赞赏。如果我需要提供更多信息，请告诉我。

4

1 回答 1

1

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

于 2013-11-13T05:34:38.587 回答