文章/答案/技术大牛

发布

社区首页 >问答首页 >在不更改整个布局的情况下，无法向引导网格添加边距

问在不更改整个布局的情况下，无法向引导网格添加边距
EN

Stack Overflow用户

提问于 2019-04-26 18:15:14

回答 2查看 284关注 0票数 0

我开始学习Bootstrap，但由于某些原因，我在尝试创建网格时遇到了这个问题。我想让它看起来像this image，但当我试图添加一个边距时，它就断了--左边。我可以添加一个页边距-顶部没有问题，但是每当我把它在水平方向上变大一点时，它就会全部中断，并且每当我向任何元素this.添加"ml-2“时，它都会从this转到

这是我的HTML：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Tasca 21</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/master.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col" id="top"></div>
      </div>
      <div class="row">
        <div class="mt-2 col-lg-2 col-md-2 col-sm-3 xs-hidden" id="left"></div>
        <div class="col-10">
          <div class="row">
            <div class="mt-2 col" id="top2"></div>
          </div>
          <div class="row" id="mid">
            <div class="mt-2 col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
            <div class="mt-2 col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
          </div>
          <div class="row" id="cubes">
            <div class="mt-2 col-2"></div>
            <div class="mt-2 col-2"></div>
            <div class="mt-2 col-4"></div>
            <div class="mt-2 col-2"></div>
            <div class="mt-2 col-2"></div>
          </div>
          <div class="row" id="cubes">
            <div class="mt-2 col-2"></div>
            <div class="mt-2 col-2"></div>
            <div class="mt-2 col-4"></div>
            <div class="mt-2 col-2"></div>
            <div class="mt-2 col-2"></div>
          </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12 mt-2" id="bottom"></div>
    </div>
  </div>
  </body>
</html>

和我的CSS：

body {
  margin: 5em;
}
#top {
  background-color: #2ECC40;
  height: 2em;
}
#bottom {
  background-color: #2ECC40;
  height: 1em;
}
#left {
  background-color: #FF4136;
  height: 14.5em;
}
#top2 {
  background-color: #F012BE;
  height: 2em;
}
#mid div {
  background-color: #FF851B;
  height: 5em;
}
#cubes div {
  background-color: #0074D9;
  height: 3em;
}

twitter-bootstrap

bootstrap-4

containers

回答 2

Stack Overflow用户

发布于 2019-04-26 18:19:29

您的样式规则可能会与bootstrap冲突。我建议您使用自己的样式将行包装在div中，如下所示：

<div id="cubes">
  <div class="row">
    <div class="mt-2 col-2"></div>
    <div class="mt-2 col-2"></div>
    <div class="mt-2 col-4"></div>
    <div class="mt-2 col-2"></div>
    <div class="mt-2 col-2"></div>
  </div>
</div>

这将消除可能的冲突

票数 0

Stack Overflow用户

发布于 2019-04-26 20:28:16

更改左/右边距将更改how the grid works，因为上的负边距与列上的填充(间距)特别相关。

如果要更改列之间的间距，最好是在列上使用 padding ，或者在<>E215、as explained here列的内容上使用margins 。

票数 0

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

原文链接：

https://stackoverflow.com/questions/55865425

复制

相似问题

问在不更改整个布局的情况下，无法向引导网格添加边距
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在不更改整个布局的情况下，无法向引导网格添加边距EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在不更改整个布局的情况下，无法向引导网格添加边距
EN