文章/答案/技术大牛

发布

社区首页 >问答首页 >引导使div在没有新行的情况下具有裕度。

问引导使div在没有新行的情况下具有裕度。
EN

Stack Overflow用户

提问于 2021-06-28 13:17:39

回答 2查看 168关注 0票数 1

.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;
}

如何解决这个问题。为什么引导不允许添加一些空白。您有想法通过引导来修复这个问题吗？

bootstrap-4

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-06-28 13:22:42

不要将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>

票数 1

Stack Overflow用户

发布于 2021-06-28 13:26:21

实际上，在引导过程中，所有属性都很重要，所以最好添加类m-t, m-b, m-r, m-l，或者为每个属性设置重要的属性。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68164070

复制

相似问题

问引导使div在没有新行的情况下具有裕度。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导使div在没有新行的情况下具有裕度。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导使div在没有新行的情况下具有裕度。
EN