Bootstrap 3行中相同高度的图像

Question

我有这个代码，我需要有相同高度的行 - ＆gt;它们的高度相同：

<div class="col-md-6 col-xs-12" style="padding: 0 10px 0 0;">
   <a href="/shoes/">
     <img src="http://placehold.it/590x350" class="img-responsive" border="0" data-width="590" data-height="350" />
   </a>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 10px 0 10px;">
   <a href="/shirts/">
     <img src="http://placehold.it/285x350" class="img-responsive" border="0" data-width="285" data-height="350" />
   </a>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 0 0 10px;">
   <a href="/jackets/">
     <img src="http://placehold.it/285x350" class="img-responsive" border="0" data-width="285" data-height="350" />
   </a>
</div>

你知道一些修复方法吗？

Answer 1

为img创建一个类并添加一个高度

＆＃13;

＆＃13;

.images img{
  height: the height you need it
}

＆＃13;

<div class="images">
<div class="col-md-6 col-xs-12" style="padding: 0 10px 0 0;">
   <a href="/shoes/">
     <img src="http://placehold.it/590x350" class="img-responsive" border="0" data-width="590" data-height="350" />
   </a>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 10px 0 10px;">
   <a href="/shirts/">
     <img src="http://placehold.it/285x350" class="img-responsive" border="0" data-width="285" data-height="350" />
   </a>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 0 0 10px;">
   <a href="/jackets/">
     <img src="http://placehold.it/285x350" class="img-responsive" border="0" data-width="285" data-height="350" />
   </a>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

同样的高度，你走了。

img {
  max-height: 100px;
}
.container {
  display: flex;
}

<div class='container'>



  <div class="col-md-6 col-xs-12" style="padding: 0 10px 0 0;">
    <a href="/shoes/">
      <img src="http://placehold.it/590x350" class="img-responsive" border="0" data-width="590" data-height="350" />
    </a>
  </div>
  <div class="col-md-3 col-xs-6" style="padding: 0 10px 0 10px;">
    <a href="/shirts/">
      <img src="http://placehold.it/285x350" class="img-responsive" border="0" data-width="285" data-height="350" />
    </a>
  </div>
  <div class="col-md-3 col-xs-6" style="padding: 0 0 0 10px;">
    <a href="/jackets/">
      <img src="http://placehold.it/285x350" class="img-responsive" border="0" data-width="285" data-height="350" />
    </a>
  </div>

</div>

Answer 3

如果你使用bootstrap，你可以尝试做类似的事情。

<div class="images">
<div class="col-md-6 col-xs-12" style="padding: 0 15px;">
  <div class="col-xs-12" style="padding:0">
   <a href="/jackets/">
     <img src="http://placehold.it/285x350" class="img-responsive" border="0" data-width="285" data-height="350" />
   </a>
  </div>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 15px;">
  <div class="col-xs-12" style="padding:0">
   <a href="/jackets/">
     <img src="http://placehold.it/285x350" class="img-responsive" border="0" data-width="285" data-height="350" />
   </a>
  </div>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 15px;">
  <div class="col-xs-12" style="padding:0">
   <a href="/jackets/">
     <img src="http://placehold.it/285x350" class="img-responsive" border="0" data-width="285" data-height="350" />
   </a>
  </div>
</div>
  
</div>

Answer 4

首先，在开始调用bootstrap col-md-3之前，你需要一个容器和一行。

You can learn more about Bootsrap here

还有一件事，不适合使用自己的自定义类来设置具有引导类的html元素，但是你可以这样做：

<div class='$any_Bootstrap_css'>
  <div class="wrapper">
    You can the insert your content here like the img tag.
    </div>
  </div>

您可以随时在另一个包装器中使用它，然后可以添加自定义类样式。