Bootstrap 有自己的网格系统,我想尽可能多地利用它,以便我可以最大限度地减少任何自定义 CSS。
我有下面的代码,其中我在这里有几个 row
类,您可以在此处看到第一行与行的其余部分不对齐。有什么办法可以让这个对齐吗?
您也可以在 codepen https://codepen.io/aceraven777/pen/zYZMpEd
上查看<div>
<div class="row">
<div class="col-4">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-8">
<div class="bg-red">
This is a content
</div>
</div>
</div>
<div class="row">
<div class="col-8 row">
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
</div>
<div class="col-4">
<div class="bg-red">
This is a content
This is a content
This is a content
This is a content
This is a content
This is a content
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
问题是您将行和列组合在一个 div 中。使用 bootstrap,您无法组合行和列,因为存在一些冲突的 css。只需将此 div <div class="col-8 row">
拆分为两个单独的 div。
<div>
<div class="row">
<div class="col-4">
<div class="bg-red">This is a content</div>
</div>
<div class="col-8">
<div class="bg-red">This is a content</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red"></div>
</div>
</div>
</div>
</div>
</div>