bootstrap在没有换行的情况下为div提供了一个裕度

Question

.box {
background-color:red;
color: #fff;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<div class="container">
<div class="row">
<div class="col-md-6 box">Box1
</div>
<div class="col-md-6 box">Box2
</div>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

以上内容没有问题。但当我给div添加边距时，第二个div会转到下一行。

.box {
margin: 0px 1px;
background-color:red;
color: #fff;
}

如何解决此问题。为什么引导程序不允许添加一些余量。你有任何想法通过引导程序来解决这个问题吗？

Answer 1

不要将margin与.col-*一起使用。它打破了引导程序的布局。默认情况下，

col-md-6 + col-md-6 = row 
50%      +  50% = 100%

但是当你使用margin

(col-md-6 + margin ) + (col-md-6 + margin ) > row 
( 50 %  + 1px )  + (50 % + 1px) > 100%

---

在列内添加另一个元素并在其上使用边距。

.box {
margin: 0px 1px;
background-color: red;
color: #fff;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
<div class="row">
<div class="col-md-6">
<div class="box">
Box1
</div>
</div>
<div class="col-md-6">
<div class="box">
Box2
</div>
</div>
</div>
</div>

Answer 2

实际上，在bootstrap中，所有属性都很重要，所以您应该更好地添加classm-t, m-b, m-r, m-l或使每个属性都重要。