Question

我有关于bootstrap行的问题。当每个网格“框”中的文本长度不同时，该行下面的空格变为空，并将下一个框推到左侧。这有点难以解释，但请查看我的网站以了解我的意思。它是挪威语，但我认为你会明白这一点：http://speedcubing.no/example/PLL.html

如您所见，网格中有许多空洞“洞”。

要修复此问题的任何CSS属性吗？

HTML：

<div class="row">
    <div class="col-md-4 col-sm-6">
        <h3>A-perm (a)</h3>
             <img src="http://cube.crider.co.uk/visualcube.php?fmt=png&amp;bg=t&amp;size=510&amp;view=plan&amp;case=x R' U R' D2 R U' R' D2 R2 x'&amp;arw=U0U2,U2U8,U8U0">
                     <p>x R' U R' D2 R U' R' D2 R2</p>

    </div>
</div>

显然还有很多.col-md-4 div ..

CSS：

.col-md-4 {
     text-align: center;
     margin-top: 20px;
     margin-bottom: 20px; 
}

.col-md-4 p{
     font-size: 30px; 
}

Answer 1

一个非常简单的解决方案是这样做，没有两行文本的div在末尾添加一个中断标记<br>。

行内的第9个子div是网格开始为我添加间隙的地方，一个简单的解决方案就是这个......

示例：

<p>M2' U' M2' U2' M2' U' M2'<br></p>

这将确保每个子div具有相同的高度，使网格流畅。或者，您可以为每个子div添加固定高度。

Answer 2

这里的问题是，你的专栏不太清楚，因为一个人比另一个人高。要解决此问题，请在清除该列时使用.clearfix。

在您的问题中，代码将是这样的。

<div class="row">
  <div col-md-4>
    <!--Your contents here-->
  </div>
  <div col-md-4>
    <!--Your contents here-->
  </div>
  <div col-md-4>
    <!--Your contents here-->
  </div>

  <div class="clearfix">
    <!--Second row starts from here-->
    <div col-md-4>
      <!--Your contents here-->
    </div>
  </div>
</div>

Bootstrap行问题

2 个答案: