时间戳

首页 > 解决方案 > Bootstrap 4改变列之间的间距，而不是从一侧到另一侧

html - Bootstrap 4改变列之间的间距，而不是从一侧到另一侧

问题描述

我试图实现的是让 2 个 div 占据 6 列 bith，它们之间有 1px 的空间。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container-fluid">
<div class="row">
<div class="col-6 bg-dark text-light text-center mr-1"> Hello </div>
<div class="col-6  bg-danger text-light text-center"> Hello </div>
</div>
</div>

但是由于某种原因，当我尝试实现它时，另一个项目在下面（包裹）而不是并排。你知道我怎样才能让项目之间有一些空间的 6 列并且仍然保持并排吗？

标签： htmlcssbootstrap-4css-grid

解决方案

装订线（列之间的间距）是用填充而不是边距创建的。当您调整边距时，它会脱离网格。您可以使用内部 DIV 的...

<div class="container-fluid px-0">
    <div class="row no-gutters">
        <div class="col-6 text-light text-center">
            <div class="bg-dark mr-1">Hello</div>
        </div>
        <div class="col-6 text-light text-center">
            <div class="bg-danger">Hello</div>
        </div>
    </div>
</div>

或者，强制rowno 用flex-nowrap...

<div class="container-fluid">
    <div class="row flex-nowrap">
        <div class="col-6 bg-dark text-light text-center mr-1"> Hello </div>
        <div class="col-6 bg-danger text-light text-center"> Hello </div>
    </div>
</div>

或者，只需使用填充工具来调整列间距。

https://codeply.com/go/p4NpmmRxmb

推荐阅读