Question

我试图实现的目标是让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列的项目之间有一些间距，并且仍然保持并排吗？

Answer 1

装订线（列之间的间距）是使用填充而不是边距创建的。调整边距时，它会脱离网格。您可以使用内部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>

或强制row否以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://www.codeply.com/go/p4NpmmRxmb

Answer 2

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
  <div class="col-sm-6" style="background-color:yellow;">50%</div>
  <div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
</div>

Bootstrap 4更改下面的列环绕之间的间距，而不是左右

2 个答案: