如何在 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>

输出

希望这对你有帮助。