我正在尝试使用 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>
问题是内部内容相对于周围内容未对齐。我怀疑这是因为行的边距为负。有没有办法解决或规避这个问题?
最佳答案
bootstrap 3
没有.col
定义。
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>
关于html - 使用 bootstrap 的嵌套布局导致错位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44407125/