html - 使用 bootstrap 的嵌套布局导致错位

Question

我正在尝试使用 bootstrap 3 创建嵌套布局。我遵循了 the tutorial (参见有关嵌套的部分)。布局基本上只包含由单列组成的行，但是出于技术原因我仍然需要嵌套。我当前的版本是 in this fiddle .

简而言之，我使用交替的行/列 div 来实现嵌套:

<div class="row">
  <div class="col">
    <div class="row">
      <div class="col">
        Content row 1 (misaligned)
      </div>
    </div>
  </div>
</div>

问题是内部内容相对于周围内容未对齐。我怀疑这是因为行的边距为负。有没有办法解决或规避这个问题？

Answer 1

bootstrap 3 没有.col 定义。

TWBS-3#css#grid语法是:.col-${screen}-${span} 其中:

1. screen = ['xs', 'sm', 'md', 'lg']
2. span = [1-12]

因此，假设您想要使用超小屏幕，您的 html 应该如下所示:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section class="container">

  <div class="row">
    <div class="col-xs-12">
      <div class="row">
        <div class="col-xs-12">
          Content row 1 (misaligned)
        </div>
      </div>
    </div>
  </div>

</section>

这里是使用screen = xs的官方例子

.txt {
  background: cyan;
  height: 20px;
  display: flex;
  margin: 3px 0;
  align-items: center;
  justify-content: center;
}

.row { margin-bottom: 50px; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<section class="container">
<div class="row">
  <div class="col-xs-1"><div class="txt">1</div></div>
  <div class="col-xs-1"><div class="txt">1</div></div>
  <div class="col-xs-1"><div class="txt">1</div></div>
  <div class="col-xs-1"><div class="txt">1</div></div>
  <div class="col-xs-1"><div class="txt">1</div></div>
  <div class="col-xs-1"><div class="txt">1</div></div>
  <div class="col-xs-1"><div class="txt">1</div></div>
  <div class="col-xs-1"><div class="txt">1</div></div>
  <div class="col-xs-1"><div class="txt">1</div></div>
  <div class="col-xs-1"><div class="txt">1</div></div>
  <div class="col-xs-1"><div class="txt">1</div></div>
  <div class="col-xs-1"><div class="txt">1</div></div>
</div>
<div class="row">
  <div class="col-xs-8"><div class="txt">.col-xs-8</div></div>
  <div class="col-xs-4"><div class="txt">.col-xs-4</div></div>
</div>
<div class="row">
  <div class="col-xs-4"><div class="txt">.col-xs-4</div></div>
  <div class="col-xs-4"><div class="txt">.col-xs-4</div></div>
  <div class="col-xs-4"><div class="txt">.col-xs-4</div></div>
</div>
<div class="row">
  <div class="col-xs-6"><div class="txt">.col-xs-6</div></div>
  <div class="col-xs-6"><div class="txt">.col-xs-6</div></div>
</div>

</section>