http://www.bootply.com/somVIZEXxC# Здесь загружается мой сайт, в основном я хочу, чтобы cols col-lg-6 была одинаковой высоты, чтобы изображения, которые у меня внутри, были четными, на данный момент одно изображение простирается ниже другого.Как сделать колонки бутстрапа одинаковой высоты в строке?
Edit: Текущая версия http://www.bootply.com/UIWf6q09h4
Попробуйте вынимая ваш
<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's – TheNoob
Изображения все равно должны быть в их собственном col-lg-6 (в одной строке), но h1 должен быть в своем собственном col-lg-12 (в другой строке) – user3089840
мой плохой, я сделал именно это сейчас и он по-прежнему такой же, как раньше – TheNoob
Вы пытались использовать max-height:?
Heres форк кода http://www.bootply.com/wVSqmPKERL
добавил еще одну строку в столбцы и добавить класс height-fix который только добавляет
атрибут max-height, что вы можете установить, что вам нужно.
редактировать Вы можете также совместить это с min-height, если изображение малого
Когда вы говорите, что я могу установить максимальную высоту в то, что мне нужно, установить это в c ss, например .col-log-6 {max-height: 100%;}, и установить его в процентах или px? – TheNoob
Я установил его в столбец, поэтому я добавил класс 'height-fix', поэтому вы просто расширяете класс столбца, а не редактируете его, и давайте использовать px heres на нем. Https://css-tricks.com/almanac/properties/m/max-height/ – NooBskie
это ничего не меняет, даже если я устанавливаю максимальную высоту в 1px, изображения остаются на странице uneffected – TheNoob
Материалы должны быть размещены внутри колонны, и только столбцы могут быть непосредственными потомками строк
Итак, вытащите h1 из .row и установите класс .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/
Здесь минимальный фрагмент для иллюстрации:
.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 (высота , если может быть фоном и т. д.) Вот несколько советов, чтобы достичь того, чего вы хотите:
Удалить margin из 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?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
@TheNoob Я добавил минимальный фрагмент, чтобы проиллюстрировать, что оба 'col-' имеют дайте мне знать, если это сработает для вас. –
Кажется, это работает с точки зрения получения столбцов равной высоты, но как это сделать, чтобы мое изображение заполнило весь столбец? Кроме того, в чем преимущество использования xs вместо lg? – TheNoob
просто добавить "равноапостольного высот" класс в столбцы родителя
$('.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>
возможно дубликат [Как я могу сделать Bootstrap все столбцы той же высоте?] (Http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all -the-same-height) –
Я пробовал это решение, оно не сработало для меня – TheNoob