【问题标题】: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>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2016-12-12
      • 2017-06-15
      • 2018-05-19
      • 2017-06-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多