Как сделать колонки бутстрапа одинаковой высоты в строке?

Question

Как сделать колонки бутстрапа одинаковой высоты в строке?

4

Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными дочерними элементами .rows

Так Убирайся .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>.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?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>

Здесь полная информация http://getbootstrap.com.vn/examples/equal-height-columns/

Здесь минимальный фрагмент, иллюстрирующий:

margin

row

Как я уже сказал, я не знаю ограничения вашего img (высота, если это может быть фон и т. Д.) Вот несколько советов по достижению того, что вы хотите:

Удалите col-из rowи дополнение от 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?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?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>

1

просто добавьте класс равных высот в столбцы parent

$('.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>

см. это перо ...

0

Попробуйте вытащить

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

потому что одна «строка» предназначена для добавления до 12. Прямо сейчас у вас есть этот h1 в строке вместе с вашими двумя col-lg-6, которые должны быть в ряду своих (6 + 6 = 12).

H1 должен быть в своем ряду со своим собственным col-lg-12 или любым другим, что вы, возможно, захотите.

0

Вы пытались использовать max-height:?

heres вилка вашего кода http://www.bootply.com/wVSqmPKERL

добавила еще одну строку в столбцы и добавила класс, height-fixкоторый просто добавляет

max-heightатрибут , который вы можете установить , что вам нужно.

edit Вы также можете комбинировать это с min-heightтем,

HTML, CSS, твиттер-самозагрузки,

html,css,twitter-bootstrap,

2

Ответов: 4