[英]What is happening to my grid system? Bootstrap
Why are my pictures lining up strangely at col-sm-6? 为什么我的照片在col-sm-6上奇怪地对齐? I understand that at that point each row should two pictures in a row.
我知道在这一点上,每行应连续两张图片。 However, they are stacking strangely and I am left with two pictures in one row and a row of one picture below that.
但是,它们堆叠得很奇怪,我剩下的是一排两张图片,一排下面的图片。 What am I doing wrong?
我究竟做错了什么?
<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>
I need every row to have two pictures on at col-sm-6 我需要每一行在col-sm-6上放两张照片
No need to repeat row
class 无需重复
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>
In Bootstrap col-sm-6
has 50% width & col-sm-4
has 33.33% width so that you need to used col-sm-4
if you want three image per row. 在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>
The row
class starts a new row block where columns are laid out one after another. row
类将启动一个新的行块,其中的列将依次排列。 In order to display grid view you should place all items in a single row. 为了显示网格视图,您应该将所有项目放在一行中。
In your broken case each row contains up to 3 columns - that is why the third item has no sibling as the next row is rendered underneath. 在断的情况下,每一行最多包含3列-这就是为什么第三项没有同级的原因,因为下一行呈现在下面。
Please see following snippet (expand it to see media queries in action): 请查看以下代码段(展开以查看实际的媒体查询):
<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>
Another example using col-xs-12 col-sm-6 col-md-3 col-lg-2
Bootrap's grid system : 使用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.