Question

我正在尝试使用Bootstrap构建这种图像网格，但我在理解如何创建代码时遇到了一些问题。这是最后一个例子。

这是我的代码，直到现在

＆＃13;

.border { border: 1px solid red; }

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-4 border">
      <img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
    </div>
    <div class="col-md-4 border">
      <img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="516" title="someText" alt="someText">
    </div>
    <div class="col-md-4 border">
      <img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
    </div>
  </div>
  <div class="row">
    <div class="col-md-8 border">
      <img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
    </div>

    <div class="col-md-4 border">
      <img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
    </div>
  </div>
</div><!-- container -->

＆＃13;

Answer 1

你所拥有的是一行中有三列。这三列中的两列有一列有两行。

以下是您可以构建的基本示例。

＆＃13;

.gallery .v-spacer {
  margin-top: 30px; /* Default Bootstrap gutter (10px) x 2 */
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row gallery">

  <div class="col-sm-4">
  
    <div class="row">
      <div class="col-sm-12">
        <img class="img-responsive" src="http://placehold.it/600x400/FC0/">
      </div>
    </div>
    <div class="row v-spacer">
      <div class="col-sm-12">
        <img class="img-responsive" src="http://placehold.it/600x400">
      </div>
    </div>  
  
  </div>
  
  <div class="col-sm-4">
    <img class="img-responsive" src="http://placehold.it/600x830">
  </div>

  <div class="col-sm-4">
  
    <div class="row">
      <div class="col-sm-12">
        <img class="img-responsive" src="http://placehold.it/600x400">
      </div>
    </div>
    <div class="row v-spacer">
      <div class="col-sm-12">
        <img class="img-responsive" src="http://placehold.it/600x400/FC0/">
      </div>
    </div>  
  
  </div>

</div>

＆＃13;

请注意，我们继续使用.row和列类.col-**-**来维护网格的正确结构，该网格使用填充和负边距来创建列与其容器之间的排水沟（空间）。 / p>

修改如果您尝试使其响应，则中间图像会出现一些问题。中间图像不会始终与堆叠图像对齐。这是因为堆叠图像列的总高度是两个可变高度加上固定高度。中间图像无法匹配100％，因为它始终是单个可变高度，并且无法匹配堆叠列中引入的固定高度。

Answer 2

你应该遵循以下网格结构

{ state: 'success',
  sessionId: 'bc0b1b932cf8dac815bc8f1d94128a3c0d0278bd',
  hCode: 16988771,
  value: { ELEMENT: '2' },
  class: 'org.openqa.selenium.remote.Response',
  status: 0 }

请参阅fiddle

Answer 3

可以尝试下面的代码。

演示：https://jsfiddle.net/uurzr45k/2/

       <div class="row">

  <div class="col-xs-4">
  <div class="row">
  <div class="col-xs-12">
</div>
</div>

 <div class="col-xs-4">
  <div class="row">
  <div class="col-xs-12">
</div>
</div>

 <div class="col-xs-4">
  <div class="row">
  <div class="col-xs-12">
</div>
</div>

</div>

Bootstrap图库的网格对齐问题

3 个答案: