Bootstrap 网格显示不正确

Question

我怎样才能正确显示我的网格而不用巨大 space，并且看起来不错？

我的代码：

<div class="first">
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/General/02/35/49/87/2354987_w2.jpg" class="img-responsive"/>
        </div>

        <div class="col-md-3">
            <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/01/83/81/26/1838126_s2.jpg" class="img-responsive"/>
        </div>

        <div class="col-md-3">
            <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/02/36/89/27/2368927_s2.jpg" class="img-responsive"/>
        </div>

        <div class="col-md-6">
            <img src="http://i.telegraph.co.uk/multimedia/archive/03498/BEAU_3498448b.jpg" class="img-responsive"/>
        </div>

        <div class="col-md-3">
            <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/01/83/81/26/1838126_s2.jpg" class="img-responsive"/>
        </div>

        <div class="col-md-3">
            <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/02/36/89/27/2368927_s2.jpg" class="img-responsive"/>
        </div>
    </div>
</div>

也许我应该使用任何 JS 脚本或其他东西？请帮助:)

Answer 1

您需要在您使用的断点 (992px对于 col-md-*) 或当您总共有 12 列时将列放在单独的行中。

<div classs=container>
  <div classs=row>
    <div classs=col-*-6>
    <div classs=col-*-6>
  <div><!-- EQUALS 12 COLUMNS -->
  <div classs=row>
    <div classs=col-*-6>
    <div classs=col-*-3>
    <div classs=col-*-3>
  <div><!-- EQUALS 12 COLUMNS -->
<div>

使用行的示例

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>
  </div>

</div>

您自己清除浮动 @ 992px 的示例，同时仅对所有列使用一行。注意：确保以某种方式指定这些列，这样就不会干扰其他地方的网格的另一部分；该示例使用通用 .item class 来处理此问题，但可以通过多种方式完成。

有关详细信息，请参阅 MDN 上的 nth-child and clear。

@media (min-width: 992px) {
  .item:nth-child(3n+1) {
    clear: left;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">

    <div class="col-md-6 item">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>

    <div class="col-md-6 item">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>

    <div class="col-md-6 item">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>

  </div>
</div>

Bootstrap 网格显示不正确

Bootstrap grid not displaying correctly

grid

twitter-bootstrap

masonry