gpt4 book ai didi

html - 我的网格系统发生了什么? Bootstrap

转载 作者:太空宇宙 更新时间:2023-11-04 08:47:29 24 4
gpt4 key购买 nike

为什么我的图片奇怪地排列在 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>

enter image description here

我需要每一行在 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 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>

关于html - 我的网格系统发生了什么? Bootstrap ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43678916/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com