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

.col没有bootstrap 3定义。

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

screen = ['xs', 'sm', 'md', 'lg']
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>

Answer 2

没有名为＆＃34; .col1＆＃34;在引导程序中。你需要提供适当的列类来摆脱行边距。尝试使用吹码

<div class="row">
  <div class="col-xs-4 col-sm-4 col-md-4 "> Content row 1</div>
  <div class="col-xs-4 col-sm-4 col-md-4"> Content row 2 </div>
  <div class="col-xs-4 col-sm-4 col-md-4"> Content row 3 </div>
</div>

使用引导程序的嵌套布局会导致错位

2 个答案: