Я новичок в Bootstrap 3, и я хотел бы иметь 3 панели на моей целевой странице равной высоты, хотя средняя панель имеет меньше контента. При изменении размера они становятся одинаковой высоты, но не при первоначальном посещении страницы.
Я уже пытался скрывать переполнение с помощью CSS, и он отсекает нижнюю часть панели, которая не то, что я хочу, поэтому я думаю, что мне нужно использовать jQuery.
Вот мой код:
<div class="row-fluid">
<!--begin panel 1 -->
<div class="col-md-4">
<div style="text-align:center" class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title text-center">Web y Metrícas</h1>
</div>
<!-- end panel-heading -->
<div class="panel-body">
<p>
<img style="margin: 0 auto;" class="img-responsive" src="web.png" height="30%" width="30%" alt="Web y Metrícas" />
</p>
<p class="text-left lead2">Apoyamos estratégicamente la presencia de tu empresa en el mundo digital, a través de la construcción de recursos web atractivos para tus clientes.</p>
<ul class="text-left">
<li>Web Corporativas</li>
<li>Tiendas Virtuales</li>
<li>Plataformas e-Learning</li>
<li>Arquitectura de Información</li>
<li>Google Analytics, SEO–SEM</li>
<li>Análisis de Competencia Digital</li>
<li>Data Mining</li>
</ul> <a class="btn btn-primary" href="#">Ver más »</a>
</div>
<!-- end panel-body -->
</div>
<!-- end panel-primary -->
</div>
<!--end col-md-4 -->
<!-- begin panel 2 -->
<div class="col-md-4">
<div style="text-align:center" class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title">Gestíon de Redes Socials</h1>
</div>
<!-- end panel-heading -->
<div class="panel-body">
<p>
<img style="margin: 0 auto;" class="img-responsive" src="redes.png" height="30%" width="30%" alt="Gestíon de Redes Socials" />
</p>
<p class="text-left lead2">Crear una experiencia de marca excepcional a través de redes es más inteligente, rápida y las comunicaciones sociales serán más eficientes.</p>
<ul class="text-left">
<li>Compromiso</li>
<li>Publicación</li>
<li>Monitoreo</li>
<li>Analítica</li>
<li>Colaboración</li>
<li>CRM</li>
<li>Movil</li>
</ul> <a class="btn btn-primary" href="#">Ver más »</a>
</div>
<!-- end panel-body -->
</div>
<!-- end panel-primary -->
</div>
<!-- end col-md-4 -->
<!--begin panel 3 -->
<div class="col-md-4">
<div style="text-align:center" class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title">Plan de Medios</h1>
</div>
<!-- end panel-heading -->
<div class="panel-body">
<p>
<img style="margin: 0 auto;" class="img-responsive" src="medios.png" height="30%" width="30%" alt="Plan de Medios" />
</p>
<p class="text-left lead2">Trabajamos en conjunto con la empresa para reforzar las fortalezas de su organización y las comunicamos de forma integral y con un mensaje claro.</p>
<ul class="text-left">
<li>Asesoría Comunicacional</li>
<li>RR.PP</li>
<li>Presencia de Marca</li>
<li>Clipping Digital</li>
<li>Manejo de Crisis</li>
<li>Lobby</li>
<li>Media Training</li>
</ul> <a class="btn btn-primary" href="#">Ver más »</a>
</div>
<!-- end panel-body -->
</div>
<!-- end panel-primary -->
</div>
<!-- end col-md-4 -->
</div>
<!-- end row -->
Это можно сделать с помощью CSS flexbox. Требуется только минимальный CSS.
.equal {
display: -webkit-flex;
display: flex;
}
Просто добавьте .equal к вашим .row и flexbox сделает все остальное.
http://www.codeply.com/go/BZA25rTY45
UPDATE: В Bootstrap 4 используется flexbox, поэтому нет необходимости в дополнительном CSS. http://www.codeply.com/go/0Aq0p6IcHs
Если вы собираетесь использовать загрузочную сетку, я не думаю, что вы найдете простой способ сделать это без хаков, таких как css.
В основном это говорит. Когда ширина экрана больше, чем контрольная точка md в бутстрапе, укажите все элементы класса panel-body, которые являются прямыми потомками элементов столбца, минимальная высота 420px, которая оказывается "магическим числом", которое работает с вашим существующим контентом.
Опять же, я думаю, что это действительно грубое решение, но оно "работает" в крайнем случае.
@media (min-width: 992px) {
.col-md-4 > .panel > .panel-body {
min-height: 420px;
}
}
Здесь статья CSS-Tricks Столбец с равной высотой ширины жидкости, которая охватывает различные способы (display: table и flexbox), чтобы выполнить это. Однако для этой конкретной задачи вам может потребоваться отходить от адаптивной загрузочной сетки.
Кроме того, здесь Полное руководство по Flexbox
Bootstrap solution - добавьте этот css и добавьте класс в свою строку:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
В нем есть пара предупреждений, размещенных на http://getbootstrap.com.vn/examples/equal-height-columns/, но похоже, что это будет достаточно хорошо для вашего дела.
Я также видел этот ответ здесь.
Обновление для динамического числа столбцов
Bootstrap автоматически переносит столбцы в новые строки, когда вы добавляете больше, чем может помещаться в одну строку, но этот подход flexbox нарушает это. Чтобы обернуть flexbox, я обнаружил, что вы можете сделать что-то вроде этого:
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-align-content: flex-end;
align-content: flex-end;
Это потрясающе, когда у вас есть динамическое количество столбцов или столбцов, которые меняют ширину в соответствии с размером экрана. Таким образом, вы можете иметь что-то вроде этого:
<div class="row row-eq-height">
<div class="col-sm-6 col-md-4">Content...</div>
<div class="col-sm-6 col-md-4">Content...</div>
<div class="col-sm-6 col-md-4">Content...</div>
<div class="col-sm-6 col-md-4">Content...</div>
<div class="col-sm-6 col-md-4">Content...</div>
</div>
И все это соответствует ожидаемому. Просто следите - он работает только в новых браузерах. Дополнительная информация здесь
Не нашли ни одного из этих методов CSS для работы в моем случае. Я использую изображения в своих панелях, вместо этого я использовал простую функцию JQuery для выполнения выполненной работы.
window.onload = function resizePanel(){
var h = $("#panel-2").height();
$("#panel-1").height(h); // add a line like this for each panel you want to resize
}
Если идентификаторы "панель-1" и "панель-2" находятся в теге панели, выберите самую большую панель как ту, которую вы используете для установки h, и вызовите функцию в конце вашего html.
<body onresize = "resizePanel()">
Я также делаю так, чтобы вызывалась функция, когда при изменении размера окна добавление атрибута onresize в тело
эта функция находит наибольшую высоту .panel-body, а затем делает высоту всех моих элементов .panel-body.
function evenpanels() {
var heights = []; // make an array
$(".panel-body").each(function(){ // copy the height of each
heights.push($(this).height()); // element to the array
});
heights.sort(function(a, b){return b - a}); // sort the array high to low
var minh = heights[0]; // take the highest number
$(".panel-body").height(minh); // and apply that to each element
}
Теперь, когда все панели-теги одинаковы, высота должна быть очищена, когда окно изменится до повторного запуска функции "ровных панелей".
$(window).resize(function () {
$(".panel-body").each(function(){
$(this).css('height',""); // clear height values
});
evenpanels();
});
Я добавляю верхний и нижний paddings в стиле для нижнего <div>.
<div class="xxx" style="padding: 8px 0px 8px 0px">
...
</div>
Потому что каждый раз каждый случай отличается, и вам нужно настроить в соответствии с ситуацией.
Инструмент Chrome dev может быть очень полезен в таких ситуациях.
