Question

我正在尝试使用自举网格并排显示2个div。问题是我无法弄清楚如何消除div之间的空档，以使它们的内容并排显示，并且之间没有空格。

通常我只是将两个div都向左浮动或将它们都设置为“ display：inline-block”，但是我正在尝试使用更现代的技术。这是引导网格的正确用法，还是应该用于显示诸如display：table之类的表格数据？如果不是，在这种情况下应该使用哪种现代技术？

向左浮动（我正在寻找可视结果）：

<div>
    <div style="float:left;">
        Test Content 1
     </div>
     <div style="float:left; margin-left:10px;">
        Test Content 2
     </div>
</div>

引导网格（内容之间的空白）：

<div class="row">
    <div class="col-xs-6">
        Test Content 1
     </div>
     <div class="col-xs-6">
        Test Content 2
     </div>
</div>

Answer 1

自引导4开始，就有一个no-glutters类，它将解决这个问题。只需将其添加到行类中即可。

<div class="row no-gutters">
    <div class="col-xs-6">
        Test Content 1
     </div>
     <div class="col-xs-6">
        Test Content 2
     </div>
</div>

以下是有关引导文档的更多详细信息： https://getbootstrap.com/docs/4.3/layout/grid/#no-gutters

引导网格删除div之间的空间

1 个答案: