Question

我在div col- - 中制作一个divs col- - 。

这是我的代码

<body style="overflow-y:scroll;">
<div class="container">
   <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center" style="background-color: darkgray; height: 50px;">
            <p style="word-break: break-all"><h6></h6></p>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center" style="background-color: transparent; height: auto;">
            <div class="col-lg-4 col-md-4 col-sm-4" style="background-color: #003366; height: 40px;">
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4" style="background-color: #447e9b; height: 40px;">
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4" style="background-color: #ba2121; height: 40px;">
            </div>
        </div>
    </div>
</div>
</body>

它有这样的保证金

如何删除该保证金？

我认为这就是为什么col中有3个col- -4 - -8，并且8个没有平均分为3个。

所以我在col中改变了4 col- -3 - -8。但同样的结果出来了。

该保证金来自哪里？

我如何看待这些保证金？

Answer 1

因为那些3 .col-*嵌套的.col-*有一个填充。一般来说，您应该在.col-*内嵌套.row个类。 .row会在margin类上创建一个负左/右padding，以抵消左/右边.col-*。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body style="overflow-y:scroll;">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center" style="background-color: darkgray; height: 50px;">
        <p style="word-break: break-all">
          <h6></h6></p>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center" style="background-color: transparent; height: auto;">
        <div class="row">
          <div class="col-lg-4 col-md-4 col-sm-4" style="background-color: #003366; height: 40px;">
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4" style="background-color: #447e9b; height: 40px;">
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4" style="background-color: #ba2121; height: 40px;">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

在Bootstrap3上，为什么存在此保证金？

1 个答案: