我的网格系统发生了什么？引导

Question

为什么我的照片奇怪地排在col-sm-6？据我所知，每一行应该连续两张图片。然而，他们正在奇怪地堆叠，我留下了一行中的两张图片和一行下面的一张图片。我做错了什么？

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
  </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
    </div>
  </div>
   <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4" >
      <img src="img/moss.jpg" class="img-responsive">
  </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
    </div>
  </div>
   <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
  </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
    </div>
  </div>
</div>
</section>
</div>

我需要每行在col-sm-6上有两张照片

Answer 1

无需重复row课程

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>

        <div class="col-xs-12 col-sm-6 col-md-4" >
            <img src="img/moss.jpg" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>

        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>
    </div>
</div> 

Answer 2

在Bootstrap col-sm-6中有50％的宽度＆amp; col-sm-4的宽度为33.33％，因此如果您想要每行三张图片，则需要使用col-sm-4。

＆＃13;

＆＃13;

.img-responsive {
  margin-bottom: 15px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4">
      <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive">
  </div>
    <div class="col-xs-12 col-sm-4">
      <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-4">
      <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive">
    </div>
  </div>
   <div class="row">
    <div class="col-xs-12 col-sm-4" >
      <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive">
  </div>
    <div class="col-xs-12 col-sm-4">
      <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-4">
      <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive">
    </div>
  </div>
   <div class="row">
    <div class="col-xs-12 col-sm-4">
      <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive">
  </div>
    <div class="col-xs-12 col-sm-4">
      <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-4">
      <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

row类启动一个新的行块，其中列一​​个接一个地布局。要显示网格视图，您应将所有项目放在一行中。

在你破碎的情况下，每行最多包含3列 - 这就是为什么第三项没有兄弟，因为下一行是在下面呈现的。

请参阅以下代码段（展开它以查看正在运行的媒体查询）：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
  </div>
</div>

使用col-xs-12 col-sm-6 col-md-3 col-lg-2 Bootrap's grid system的另一个例子：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
  </div>
</div>