css - 如何在 Bootstrap 3 中无缝连接相邻的网格单元？

Question

我刚刚开始学习 Bootstrap (v3)，但仍然无法清楚地了解网格在无缝连接相邻单元格方面的工作原理。

我正在整理 a fluid navigation bar .粗略地说，我正在使用这种方法:

 <div class="row">
    <div class="col-md-3">LEFT PART OF IMAGE</div>
    <div class="col-md-6">CENTRAL PART-NAVIGATION</div>
    <div class="col-md-3">RIGHT PART OF IMAGE</div>
 </div>

但我仍然无法摆脱列之间的空白区域(它在更大的屏幕上变得更难看)。有没有一种方法可以在 Bootstrap 中将它们无缝地组合在一起？我的意思是，我可以使用表格或 div(固定设计)轻松设计横跨整个屏幕的行，没有任何中断或空白，但使用 Bootstrap 的流动列似乎不起作用。

在代码 ( see here ) 中，我尝试了一些技巧 - 比如覆盖装订线设置(使其 = 0) - 几乎让它工作，但我仍然觉得 BS 或我这边的根本误解。

我在这里做错了什么吗？我怎样才能修复它并把它变成一个很好的负责任的行？

非常感谢任何建议。

Answer 1

我对 Bootstrap 不太熟悉，但正如我看到的那样，您只需要将 width: auto包含包含图标的 ul 的容器。

<div class="col-md-6" style="width: auto ! important;">CENTRAL PART-NAVIGATION</div>

您也可以设置类并将其添加到div。

.new-class {
  width: auto ! important;
}

并制作 html <div class="col-md-6 new-class">CENTRAL PART-NAVIGATION</div>

输出

希望这对你有帮助。