Question

我在响应式设计中发现了bootstrap div的一个非常棘手的问题。

我的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Grid System</title>
<link rel="stylesheet"   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap- theme.min.css">
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">    </script>
<style type="text/css">
    p{
    padding: 50px;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    background: #f2f2f2;
}
</style>
</head>
<body>
<!-- Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the window to understand how the Bootstrap responsive grid system works. -->
<div class="container">
    <div class="row">
        <div class="col-md-2"><p>Box 1 test</p></div>
        <div class="col-md-2"><p>Box 2</p></div>
        <div class="col-md-2"><p>Box 3</p></div>
        <div class="col-md-2"><p>Box 4</p></div>
        <div class="col-md-2"><p>Box 5</p></div>
        <div class="col-md-2"><p>Box 6</p></div>
        <div class="col-md-2"><p>Box 7</p></div>
        <div class="col-md-2"><p>Box 8</p></div>
        <div class="col-md-2"><p>Box 9</p></div>
        <div class="col-md-2"><p>Box 10</p></div>
        <div class="col-md-2"><p>Box 11</p></div>
        <div class="col-md-2"><p>Box 12</p></div>
    </div>
</div>
</body>
</html>

如果您在HTML中尝试此代码，在中等大小的屏幕中，您会看到Box 7显示在Box 2下而不是Box 1下。因为Box 1有额外的字符串：test。

所以我想知道是否有办法让它们很好地对齐？比如Box 7在Box 1下面显示，依此类推......

提前谢谢你们。

Answer 1

在方框6之后关闭row，然后添加一个新行。

  <div class="container">
    <div class="row">
        <div class="col-md-2"><p>Box 1 test</p></div>
        <div class="col-md-2"><p>Box 2</p></div>
        <div class="col-md-2"><p>Box 3</p></div>
        <div class="col-md-2"><p>Box 4</p></div>
        <div class="col-md-2"><p>Box 5</p></div>
        <div class="col-md-2"><p>Box 6</p></div>
   </div>
   <div class="row">
        <div class="col-md-2"><p>Box 7</p></div>
        <div class="col-md-2"><p>Box 8</p></div>
        <div class="col-md-2"><p>Box 9</p></div>
        <div class="col-md-2"><p>Box 10</p></div>
        <div class="col-md-2"><p>Box 11</p></div>
        <div class="col-md-2"><p>Box 12</p></div>
    </div>
</div>

CODEPEN DEMO

Answer 2

clearfix是元素自动清除其子元素的一种方式元素，因此您不需要添加额外的标记。它＆＃39; S 通常用于浮动布局，其中元素浮动水平堆放。 clearfix是一种对抗零高度的方法浮动元素的容器问题。＆GT;从此SO帖子What is clearfix?

您可以在指定列的最后一个div之后应用clearfix类（因为您需要6列col-md-2，总共12列）。在这种情况下，请在第六个col-md-2之后应用它。

请参阅Docs

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-2">
      <img src="http://placehold.it/850x350" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 1</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x250" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 2</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x550" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 3</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x650" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 4</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x350" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 5</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x550" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 6</p>
      </div>
    </div>
    <div class="clearfix"></div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x450" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 7</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x350" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 8</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x250" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 9</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x500" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 10</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x400" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 11</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x350" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 12</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

Boostrap div元素不能很好地对齐

2 个答案: