我的网格系统正在发生什么？ 引导程序

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％， col-sm-4宽度为33.33％，因此，如果您希望每行三张图像，则需要使用col-sm-4 。

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

 <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> 

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的网格系统 ：

 <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>