1。通过使用表格布局机制

Question

嗨我在bootstrap行中有四个div。我希望这一行中的所有div都具有相同的高度，而不是破坏责任。在不违反责任的情况下，我不知道如何做到这一点。

我尝试用固定的高度解决这个问题，但就响应性而言，这是一个糟糕的解决方案。

谢谢： - ）

<div class="row">
    <div class="col-md-3 index_div_item">
        <a href="#">
        <div class="well" id="item1">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
        </div>
        </a>
    </div>    
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item2">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
            </div>  
        </a>
    </div>    
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item3">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
            </div>
        </a> 
    </div>  
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item4">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
            </div>  
        </a>  
    </div>              
</div>

Answer 1

您可以使用javascript实现此目的。找出4个div的最大高度，并使它们像最大的一样处于同一高度。

以下是代码：

$( document ).ready(function() {
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);
});

Answer 2

使用an official experimental example和Bootstrap在同一高度列的某一点CSS flexbox。这是它的要点：

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

然后使用<div class="row row-eq-height">代替<div class="row">。

请注意，IE＆lt; 10。

不支持flexbox

Answer 3

仅供参考 - 我这样做是为了解决我的问题，以包含与bootstrap中的断点匹配的响应断点。（我使用来自bootstrap的LESS变量来同步断点，但下面是已编译的css版本）

@media (min-width: 0px) and (max-width: 767px) {
  .fsi-row-xs-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .fsi-row-sm-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fsi-row-md-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1200px) {
  .fsi-row-lg-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

然后将类添加到父级中，这是必需的。

<div class="row fsi-row-lg-level fsi-row-md-level">
<div class="col-sm-4">column 1</div>
<div class="col-sm-4">column 2</div>
<div class="col-sm-4">column 3</div>
</div>

Answer 4

编辑1：我不得不帮助那些人，所以我做了plunkr。转到“script.js”并注释“bootstrap_equalizer（）;”函数看原始bootstrap，没有相同高度的列。

我知道这有点晚了但我确信这可以改善您的代码并帮助其他人！：）

由于我习惯使用Foundation 5，当我必须使用bootstrap时，我会错过“均衡器”。

我做了一个小函数来调用你必须“均衡”某些列的页面。我的代码基于@paulalexandru响应！

function bootstrap_equalizer() {
  $(".equalizer").each(function() {
    var heights = $(this).find(".watch").map(function() {
      return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".watch").height(maxHeight);
  });
}

在HTML方面，你只需要这样做：

<div class="container">
   <div class="row equalizer">
      <div class="watch">
         Column 1
      </div>

      <div class="watch">
         Column 2
      </div>
   </div>
</div>

第1栏和第1栏第2列将具有相同的高度！你当然可以拥有超过2列！

希望这可以提供帮助！ =）

Answer 5

您可以使用display:table属性：

.row {display:table; width:100%; border-spacing:10px; }
.col-md-3 {display:table-cell; width:25%;}

Example

<强>更新

由于人们在打破引导程序时似乎正在低估这一点，你应该真正将不同类的元素定位到引导程序使用的内容 - 所以这里是一个更新的小提琴，它不会打破其余的引导程序 - 对于上面的代码，如果你在行中添加另一个table-row类，那么你可以使用以下样式：

@media (min-width: 992px) {
  .row.table-row {
    display: table;
    width: 100%;
    min-width: 800px;
    border-spacing: 10px;
  }
  .row.table-row > .col-md-3 {
    display: table-cell;
    width: 25%;
  }
  .row.table-row > .col-md-3 {
    float: none;
  }
}

Example

Answer 6

我有同样的情况，其中一行中的每列应该具有相同的高度。通过考虑上面的答案和一点点技巧，很容易实现并解决窗口调整大小的问题。

$(document).ready(function() {
    //Initiate equalize on load
    equalize();
});

//Equalize on resizing of window
$(window).resize(function() {
    removeHeights();
    equalize();
});

function equalize(){

    $(".container .row").each(function() {
        var heights = $(this).find("p").map(function() {
          return $(this).height();
        }).get(),

        maxHeight = Math.max.apply(null, heights);

      $(this).find("p").height(maxHeight);

    });
}

function removeHeights(){

    $(".container .row").each(function() {

      $(this).find("p").height("auto");

    });
}

在此处查看演示 - https://jsfiddle.net/3Lam7z68/（调整输出窗格的大小以查看每个div列的大小正在变化）

Answer 7

@cvrebert提到的

Bootstrap's experiment适用于Microsoft Internet Explorer（版本11）和Mozilla Firefox（版本37），但在Google Chrome浏览器上不适合我（版本42,64位））。

受到@ cvrebert和@ Maxime的答案的启发，我想出了这个解决方案，这对我这三种浏览器都有效。我决定分享它，也许其他人也可以使用它。

假设你的HTML中有这样的东西：

<div class="row row-eq-height">
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
</div>

将此添加到您的JS：

$(document).ready(function() {
    $(".row-eq-height").each(function() {
        var heights = $(this).find(".col-eq-height").map(function() {
            return $(this).outerHeight();
        }).get(), maxHeight = Math.max.apply(null, heights);

        $(this).find(".col-eq-height").outerHeight(maxHeight);
    });
});

它使用jQuery的.outerHeight()函数来计算和设置内部div的高度。

另外，我将此添加到我的CSS中，我不确定这是否有帮助，但肯定没有伤害：

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

Answer 8

要获得相同的列高度且不破坏响应性，您应该尝试这样做：

https://github.com/liabru/jquery-match-height

它使用＆＃34; JQuery＆＃34;。到目前为止，对我来说，这是最简单的解决方案。

Answer 9

对于所有具有相同高度的div，您必须为内部div指定固定高度（div class =“well”），

CSS

.index_div_item{
    display: block;
    height: 400px;
}

.index_div_item a .well{
    height: 400px;
}

例如，您可以点击此链接demo。

Answer 10

我在游戏中有点晚了，但是......

这会将行中项目的高度与一行＆＃34;行高匹配＆＃34;对齐。它根据单元格的最高值匹配单元格，因此当页面变小时它们会相互移动，我不会设置高度。

我知道有很多CSS版本，但它们都破坏了我的版面设计。

$(window).resize(function () {
    var rows = $(".row.row-height-matched");

    rows.each(function () {
        var cells = $(this).children("[class^='col-']");

        cells.css("height", "");

        var j = [];

        cells.each(function () {
            j.push($(this).offset().top);
        });

        var u = $.unique($(j));

        u.each(function () {
            var top = $(this)[0];

            var topAlignedCells = cells.filter(function () {
                return $(this).offset().top == top;
            })

            var max = 0;

            topAlignedCells.each(function () {
                max = Math.max(max, $(this).height());
            })

            topAlignedCells.filter(function () {
                return $(this).height() != max;
            }).height(max);
        })

    })
})

Answer 11

我认为paulalexandru的答案非常好。我只会添加一些代码以避免在调整窗口大小时出现问题。如果高度最大的div包含照片，则当图像宽度发生变化时可能会出现问题，因为它也会改变它的高度，所以在这种情况下你应该处理resize事件。 / p>

$( document ).ready(function() {
    toAdapt();
    window.onresize=function(){toAdapt};       

});


function  toAdapt(){
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);
}

Answer 12

如果有人对纯粹的CSS解决方案感兴趣而不会破坏响应能力，这对我有用（请注意，我添加了类“row-eq-height”，其中“row”类是为了澄清而不是干扰使用bootstrap css并将'md'更改为'xs'以在演示中更好地检查它。）

<div class="row row-eq-height">
<div class="col-xs-3 index_div_item">
    <a href="#">
    <div class="well" id="item1">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
    </div>
    </a>
</div>    
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item2">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
        </div>  
    </a>
</div>    
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item3">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
        </div>
    </a> 
</div>  
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item4">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
        </div>  
    </a>  
</div>

的CSS：

    .row-eq-height{
    overflow: hidden; 
}

.row-eq-height > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

您可以查看演示here.

Answer 13

对于要在React中使用此解决方案的人来说，这里是：

  constructor(props) {
    super(props);
    this.state = {
      maxHeight: undefined,
    };

    this.putBootstrapColumnSameHeight = this.putBootstrapColumnSameHeight.bind(this);
  }

  componentDidMount() {
    this.putBootstrapColumnSameHeight();
  }

  putBootstrapColumnSameHeight() {
    const heights = [];
    document.querySelectorAll('.col').forEach(el => heights.push(el.clientHeight));
    this.setState(
      {
        maxHeight: Math.max.apply(null, heights),
      },
    );
  }

然后进入您的列：

<Col xs={12} md={7} className="col" style={{ height: this.state.maxHeight }}>
 // etc..
</Col>

<Col xs={12} md={5} className="col" style={{ height: this.state.maxHeight }}>
 // etc..
</Col>

享受;）

Answer 14

paulalexandru有一个很好的答案我曾经解决过我的问题。但是，当我调整窗口大小时，它并没有解决我遇到的问题。有时文本会超出指定的高度并渗入下面行中的文本。

所以我添加了第二个函数来检测窗口调整大小，将高度重置为auto，然后在div上设置高度（如果大于967）。当响应将所有内容简化为一列时，967号码可以更改为您希望使用的任何数字。

$(window).resize(function () {

        // reset height to auto.
        $(".div-name1").height("auto");  
        $(".div-name1").height("auto");            

        // check if the width is greater than 967 under 967 responsive switches to only 1 column per row
        if ($(window).width() > 967) {
            // resize the height
            myresize1(".row-name1", ".div-name-row1");
            myresize1(".row-name2", ".div-name-row2");
         }

            function myresize1(name1, name2) {
                $(name1).each(function () {
                    var heights = $(this).find(name2).map(function () {
                        console.log($(this).height() + " - ");
                        return $(this).height();
                    }).get(),

                    maxHeight = Math.max.apply(null, heights);
                    console.log(maxHeight + " - ");
                    $(name2).height(maxHeight);
                });
            };            
    });

Answer 15

我们可以通过 -

实现这一目标

使用table layout机制
使用jquery-match-height js插件

1。通过使用表格布局机制

演示 - JS Fiddle

机制是 -

将所有列包装在一个div中
将该div设为具有固定布局的表格
将每列设为表格单元格
使用vertical-align属性控制内容位置

我们可以使用以下css和类来制作相同高度的列并垂直对齐。

基础css将是 -

  /* columns of same height styles */

.row-full-height {
  height: 100%;
}

.col-full-height {
  height: 100%;
  vertical-align: middle;
}

.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}

.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}

@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}

@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}


/* vertical alignment styles */

.col-top {
  vertical-align: top;
}

.col-middle {
  vertical-align: middle;
}

.col-bottom {
  vertical-align: bottom;
}

基础html将是 -

<div class="container">
  <h2>Demo 1</h2>
  <div class="row">
    <div class="row-same-height">
      <div class="col-xs-3 col-sm-height">1st column</div>
      <div class="col-xs-3 col-sm-height col-top">2st column</div>
      <div class="col-xs-3 col-sm-height col-middle">3st column</div>
      <div class="col-xs-3 col-sm-height col-bottom">4th column</div>
    </div>
  </div>
</div>

2。匹配媒体Js

MatchHeight使所有选定元素的高度完全相等。它处理许多边缘情况，导致类似的插件失败。

演示链接 - here

Answer 16

要使网站响应，您应指定宽度（％）并显示4个具有相同高度的div并指定高度

.col-md-3 {
    width:25%;
    height:250px;
}

.row {
    width:100%;
}

相同高度列引导3行响应

16 个答案:

1。通过使用表格布局机制

演示 - JS Fiddle

2。匹配媒体Js

演示链接 - here