Question

我在将列放入bootstrap 3网格时遇到问题。具体而言 - 列＆＃34;第2行Col 4＆＃34;。

  <div class="row" >
        <div class="col-sm-3" style="background: #777;margin-right: 2px">
            <h3>Row 2 Col 1</h3>
            <div class="row">
                <div class="col-sm-12 other" style="background: #765;min-height: 300px">
                    <h3>Row 2 Col 1 Nested 1</h3>
                </div>
                <div class="col-sm-12 other" style="background: #755;min-height: 300px">
                    <h3>Row 2 Col 1 Nested 2</h3>
                </div>
            </div>

        </div>
        <div class="col-sm-6 other">
            <h3>Row 2 Col 2</h3>
            <div class="row">
                <div class="col-sm-12 other" style="background: #770;min-height: 540px">
                    <h3>Row 2 Col 2 Nested 1</h3>
                </div>
                <div class="col-sm-12 other" style="background: #760">
                    <h3>Row 2 Col 2 Nested 2</h3>
                </div>

            </div>
        </div>
        <div class="col-sm-3" style="background: #737;margin-right: 2px">
            <h3>Row 2 Col 4</h3>
        </div>

    </div>

我的示例：this 我需要在＆＃34;第1行Col 4＆＃34;下面有这个专栏。我应该在这里解决什么呢？

Answer 1

您无法在bootstrap margin上使用自定义col-*，但仍希望它们可以正常工作。
当您达到12列时，它们经过精心定制，可以总计100%行宽。为它们添加边距，它们将超过100%行宽，使最后一项浮动在下一行。

删除margin:2px上.col-*的内联版，它将按预期运行。

如果要在列之间显示空白区域，请考虑使用内容包装器放置在.col-*内。当然，将background移动到包装器上。 padding上的.col-*也是一个可行的选择。

编辑：在考虑之后，我意识到实现你想要的最快方式（也考虑你已经拥有的）是通过在cols上使用border s。 Here it is

如何将特定列正确放入引导程序3网格中

1 个答案: