如何使引导列连续具有相同的高度？

Posted 2023-03-05

【中文标题】如何使引导列连续具有相同的高度？

【英文标题】：How to make bootstrap columns the same height in a row?

【发布时间】：2015-10-26 07:52:08

【问题描述】：

http://www.bootply.com/somVIZEXxC# 这是我网站的引导程序，基本上我希望 cols col-lg-6 具有相同的高度，以便我在其中的图像是均匀的，目前，一个图像延伸到另一个图像下方一个。

编辑：当前版本http://www.bootply.com/UIWf6q09h4

【问题讨论】：

How can I make Bootstrap columns all the same height?的可能重复

我试过那个解决方案，它对我不起作用

【参考方案1】：

内容应放在列中，并且只能列 行的直接子代

所以从.row 中取出h1 并将.row-eq-height 类设置为.row，如下所示：

.row-eq-height
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;


<div class="row row-eq-height"></div>

这里有完整的信息http://getbootstrap.com.vn/examples/equal-height-columns/

这里有一个最小的 sn-p 来说明：

.row-eq-height
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

 
<h1 class="text-center"> Where do we cater to? </h1>
   
<div class="row row-eq-height">  
  <div class="col-xs-6"> 
    <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" class="img-responsive">
  </div>

  <div class="col-xs-6" style="background: blueviolet"> 
    <img src="http://orig00.deviantart.net/0cbb/f/2013/107/3/a/lnd_small_bmp_64x64_by_shadowblitz-d620m47.jpg" class="img-responsive">
  </div>
</div>

就像我说的我不知道你的img的限制（高度，如果可以是背景等）这里有一些提示来实现你想要的：

从row 中删除margin 和从col- 中的填充，将width: 100% 添加到您的图像中，如下所示：

.row-eq-height
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0;

.row-eq-height [class*="col-"]
  padding: 0;

.row-eq-height img
  width: 100%;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

 
<h1 class="text-center"> Where do we cater to? </h1>
   
<div class="row row-eq-height">  
  <div class="col-xs-6"> 
    <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" class="img-responsive">
  </div>

  <div class="col-xs-6" style="background: blueviolet"> 
    <img src="http://orig00.deviantart.net/0cbb/f/2013/107/3/a/lnd_small_bmp_64x64_by_shadowblitz-d620m47.jpg" class="img-responsive">
  </div>
</div>

如果图像可以是背景，您可以定义一个特定的比例高度，您可以使用 padding-top，比如说 4:3，即 3 * 100 / 4 = 75 = padding-top

所以你可以这样做：

.row-eq-height
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0;

.row-eq-height [class*="col-"]
  padding: 0;

.img-container  
  background-size: cover;
  padding-top: 75%; /*you can change it to obtain a desired height*/

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

 
<h1 class="text-center"> Where do we cater to? </h1>
   
<div class="row row-eq-height">  
  <div class="col-xs-6">
    <div class="img-container" style="background-image: url(http://i.stack.imgur.com/gijdH.jpg?s=328&g=1)"></div>
  </div>

  <div class="col-xs-6">
    <div class="img-container" style="background-image: url(http://orig00.deviantart.net/0cbb/f/2013/107/3/a/lnd_small_bmp_64x64_by_shadowblitz-d620m47.jpg)"></div>
  </div>
</div>

【讨论】：

这似乎只是将一个图像的大小减小了 1x1 像素，并将另一个图像的宽度减小了 1 个像素或少量

@TheNoob 我添加了一个最小的 sn-p 来说明两个 col- 具有相同的高度，让我知道这是否适合你。

这似乎可以让列的高度相等，但我如何才能让我的图像填满整个列？还有，用xs代替lg有什么好处？

这个问题的答案取决于你想要达到的目标，有很多答案，看看这些：***.com/questions/11757537/…，***.com/questions/1891857/…，***.com/questions/14142378/…

triplagent.com 最后我想要的是图像在该站点上的布局方式，并排放置，中间没有空格并延伸到页面边缘。这张截图应该有助于说明我的意思，i.imgur.com/YB7IY3P.jpg，所以右边的图像是紫色区域的大小，所以列之间没有空间，请注意实际图像要大得多，并且似乎在缩小时放入列

【参考方案2】：

只需将“equal-heights”类添加到父列

$('.equal-heights').each(function()  
    var highestBox = 0;
    $(this).children('[class*="col-"]').each(function(index, el)
        if( $(el).height() > highestBox ) highestBox = $(el).height();
    );  
    $(this).children('[class*="col-"]').css('height',highestBox);
);

html 会是这样的......

<div class="row equal-heights">
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
</div>

see this pen...

【参考方案3】：

试着拿出你的

<h1 class="text-center"> Where do we cater to? </h1>

因为一个“行”意味着加起来为 12。现在，您在行中有这个 h1 以及两个 col-lg-6，它们应该在自己的一行中（6+6= 12).

h1 应该与它自己的 col-lg-12 或任何你想要的东西在它自己的行中。

【讨论】：

我已将 h1 移至新行，它似乎对 col-lg-12 中图像的高度没有影响

图像仍应在各自的 col-lg-6 中（在一行中），但 h1 应在自己的 col-lg-12 中（在另一行中）

我的错，我现在完全做到了，它仍然和以前一样

【参考方案4】：

您是否尝试过使用max-height:？

这是你代码的一个分支http://www.bootply.com/wVSqmPKERL

在列中添加了另一行并添加了 height-fix 的类，它只是添加了

max-height 属性，您可以将其设置为您需要的任何内容。

编辑 如果图像太小，您也可以将其与 min-height 结合使用

【讨论】：

当你说我可以将最大高度设置为我需要的值时，我是否在 css 中设置它，例如 .col-log-6max-height:100%;，然后执行我将其设置为百分比还是 px？

是的，将它设置为列，这就是我添加类height-fix 的原因，所以你只是扩展列类而不是直接编辑它，是的，使用 px 继承了一些关于它的信息css-tricks.com/almanac/properties/m/max-height

这似乎并没有改变任何东西，即使我将最大高度设置为 1px，图片仍保留在页面上不受影响

你必须将max-height设置为图片所在的列

我将最大高度设置为 .col-lg-6，这是它们所在的列，我尝试了各种高度，但它们保持不变。编辑：当我使用 style= 覆盖它时，图像消失

【参考方案5】：

这是一个带有图像的响应式网格。图像容器具有相同的高度，图像本身垂直居中；

.grid 
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;


.grid>[class*='col-'] 
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 15px;


.grid img 
  margin: auto 0;


@media (max-width: 767px) 
  .container 
    max-width: 100%;
  


@media (max-width: 575px) 
  .container 
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  
  .posts-grid>[class*='col-'] 
    padding-left: 5px;
    padding-right: 5px;
  

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

 <div class="container-fluid">
  <div class="grid">
    <div class="col-sx-6 col-md-4 col-lg-2">
      <img src="http://placehold.it/350x300" class="img-responsive">
    </div>
    <div class="col-sx-6 col-md-4 col-lg-2">
      <img src="http://placehold.it/350x450" class="img-responsive">
    </div>
  </div>
</div>