Question

我遇到以下标记问题。即使容器是流体并且它们的类的总和是12，最后一行中的列也不会填满整个宽度。

<div class="container-fluid">
    <div class="row" id="header">
        <h1>Title</h1>
    </div>
    <div class="row" id="ndHeader">
        <h2>Categories </h2>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-3" id="sidebar">.col-xs-6 .col-sm-3</div>
        <div class="col-xs-6 col-sm-9">
              <div class="clearfix hidden-sm-up"></div>
            <div class="row tileRow">
                <div class="col-xs-4 col-sm-3 tile">
                    <div class="tileContent"> asd </div>
                </div>
                <div class="col-xs-4 col-sm-3 tile">
                    asd asd asdasdasdaddddddddddddddddddddddddddddddddddddddddddddddddddd
                </div>
                <div class="col-xs-4 col-sm-3 tile">
                    asd asd asdasdasdaddddddddddddddddddddddddddddddddddddddddddddddddddd
                </div>
            </div>
        </div>
    </div>
</div>

您可以看到实时示例：http://www.bootply.com/GsJbodLFwb#

Answer 1

列使用正确的宽度。在最后一行中，您有两个主要的div，col-sm-3和col-sm-9。 col-sm-9正确占用了75％的可用空间。附加了col-sm-3的div有一些css覆盖它的宽度。您需要删除以下代码才能将其恢复到应该满足的全部25％：

#sidebar {
    background-color:green;
    //width:15em; <-- remove this
    height:100%;
}

此外，您的磁贴行内的三个div仅在sm大小上加起来为9。您可能希望将它们更改为col-sm-4或者只是将它们完全删除，因为col-xs-4将执行相同的操作。

Answer 2

您正在设置这两个单元格的宽度

<div class="col-xs-6 col-sm-3" id="sidebar">...</div>
<div class="col-xs-6 col-sm-3">...</div>

第一个有width: 15em;，第二个有width: 75%;，导致行宽奇怪。如果你需要一个自定义宽度表我建议不要使用bootstrap行＆amp;细胞，只做自己的。

<div class="row">
  <div class="col-xs-12 col-sm-12">
      *my custom table or divs here*
  </div>
</div>

Bootstrap网格堆叠的列没有填满整个宽度

2 个答案: