Question

我使用bootstrap网格系统构建网站，我没有使用行类，但div之间的填充不起作用！

<div class="container"> 
    <div class="col-lg-4"></div> 
    <div class="col-lg-4"></div> 
    <div class="col-lg-4"></div> 
    <div class="col-lg-4"></div> 
</div>

任何人都可以帮助我吗？

Answer 1

在Bootstrap中，连续有12列。你有4 * 4 = 16，这是不对的。

它基于12列布局，并具有多个层，每个层对应一个媒体查询范围。

因此，您应该将代码更改为：

<div class="container"> 
  <div class="row">
    <div class="col-lg-4"></div> 
    <div class="col-lg-4"></div> 
    <div class="col-lg-4"></div> 
  </div>
</div>

请参阅文档here。

Answer 2

首先 - 假设您想要一行 - 您需要将这些div更改为每个“3”或少一个 - 请记住12是Bootstrap网格的幻数。

在.row中包含cols的原因还在于控制两边的边距。填充位于div之间 - 不在它们之间，所以下面将给你一行有3个div，它们彼此相邻以给出一个完整的行，并且在每个div中将左/右填充15px：

<div class="container"> 
  <div class="row">
    <div class="col-lg-4"></div> 
    <div class="col-lg-4"></div> 
    <div class="col-lg-4"></div> 
  </div>
</div>

.row类的两边都有-15px的边距，这样每个边div都会与父容器div的边对齐。请记住，您可以使用container-fluid在整个视口中展开父div。

总而言之 - Bootstrap .col- * divs之间没有填充，而是在它们内部填充。当然，除非你的CSS优先于。

Answer 3

根据Bootstrap documentation：

行是强制性的
每行有12列

您使用的是16列，将代码更改为：

<div class="container"> 
  <div class="row">
    <div class="col-lg-4"></div> 
    <div class="col-lg-4"></div> 
    <div class="col-lg-4"></div> 
  </div>
</div>

Bootstrap网格填充不起作用

3 个答案: