Question

我正在尝试使用自举将一行中的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>

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

预先感谢

Answer 1

您需要从列中删除col-md-offset-1，它将解决此问题。 Bootstrap具有12列布局。行中必须有许多列：6 * 2（从列开始）+ 6 * 1（从偏移开始）= 18。

Answer 2

首先，添加CSS类

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

对齐6张图像并排放置

2 个答案: