将 6 张图像彼此相邻对齐,响应引导程序



我正在尝试使用 bootstrap 将 6 张图像对齐一行,但我只得到 4 张图像,它们之间有很大的空间。我不是CSS的专业人士。

这是我的 HTML 代码

<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.container-best
{
width:70%;
text-align:center;
margin: auto;
}
.best-rate
{
background-color: #ffd564;
text-align: center;
font: 20px 'aleobold', sans-serif;
color: #4c4145;
text-transform: uppercase;
padding-bottom: 25px;
padding-top: 26px;
position: relative;
}
</style>
</head>
<body>
<div class="container">
<div class="container-best">
<div class="best-rate">
☆☆☆☆☆☆☆Today Best Choice☆☆☆☆☆☆☆
</div>
</div>  
<br />
<div class="row">
<div class="col-md-2 col-md-offset-1">
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/mercenaries.jpg">
</div>
<div class="col-md-2 col-md-offset-1" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Narco-Valley.jpg">
</div>
<div class="col-md-2 col-md-offset-1" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Vikingdom.jpg" >
</div>
<div class="col-md-2 col-md-offset-1" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Red-Dirt-Rising.jpg" >
</div>
<div class="col-md-2 col-md-offset-1" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/At-All-Cost.jpg" >
</div>
<div class="col-md-2 col-md-offset-1" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/mercenaries.jpg" >
</div>      
</div>        
<div>
</body>
</html>

我尝试修复了很多次,但我失败了,我不知道是什么问题,请帮忙。

提前致谢

首先,添加 CSS class,

.img-responsive{
width: 100%;
}

删除div 标记中的"col-md-offset-1"。并将图像添加到 .

<div class="container"> 
<div class="row">
<div class="col-md-2">
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/mercenaries.jpg">
</div>
<div class="col-md-2" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Narco-Valley.jpg">
</div>
<div class="col-md-2" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Vikingdom.jpg" >
</div>
<div class="col-md-2" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Red-Dirt-Rising.jpg" >
</div>
<div class="col-md-2" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/At-All-Cost.jpg" >
</div>
<div class="col-md-2" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/mercenaries.jpg" >
</div>      
</div>        
</div>

您需要从列中删除col-md-offset-1,它将解决问题。Bootstrap 有 12 列布局。您必须在一行中多列:6*2(来自列(+ 6*1(来自偏移量(= 18。

最新更新