html - Bootstrap 网格删除 div 之间的空间

Question

我正在尝试使用 Bootstrap 网格并排显示 2 个 div。问题是我不知道如何折叠 div 之间的空白，以便它们的内容并排显示，中间没有空格。

通常我只是将两个 div 向左浮动或将两者都设置为“display:inline-block”，但我正在尝试使用更现代的技术。这是 bootstrap grid 的正确用法，还是应该更多地用于显示表格数据，如 display:table？如果不是，我应该在这种情况下使用什么现代技术？

向左浮动(我正在寻找的视觉效果):

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

Bootstrap 网格(内容之间的空白区域):

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

Answer 1

自 bootstrap 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>

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