如何使用 bootstrap 和 css 打破两个网格列？

【问题标题】：How I can break two grid column using bootstrap and css?如何使用 bootstrap 和 css 打破两个网格列？
【发布时间】：2020-09-07 12:10:44
【问题描述】：

enter image description here

两列之间的网格分隔空间。

<section>
<div class="container mt-2">
    <div class="row justify-content-around">
        <div class="col-md-8 bg-light justify-content-around">
            <h1>Helo</h1>
        </div>
        <div class="col-md-4 bg-light">
            <h1>Hello</h1>
        </div>
    </div>
</div>

任何人帮助打破两个网格列。

【问题讨论】：

请描述你真正想要的是什么。

标签： html css bootstrap-4

【解决方案1】：

您需要使用 display inline-block 将 div 放在一行中。

试试

.justify-content-around div {
显示：内联块
}

【讨论】：

【解决方案2】：

如果您的意思是“空格”，则添加到行中每个 div 的填充。

然后您可以通过将类 no-gutters 添加到 row div 来删除它。

    <div class="row justify-content-around no-gutters">

两个 div 之间的空间现在被删除了。

如果这不是您的意思，请提供您想要的结果的屏幕截图。

【讨论】：

不客气。如果这解决了您的问题，请不要忘记单击我的答案旁边的复选标记。

【解决方案3】：

<section>
<div class="container mt-2">
    <div class="row justify-content-around">
        <div class="col-md-6 bg-light">
            <h1>Helo</h1>
        </div>
        <div class="col-md-6 bg-light">
            <h1>Hello</h1>
        </div>
    </div>
</div>

【讨论】：