Щебетать Bootstrap 3 - Панели равного роста в строке жидкости

Я новичок в 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 &raquo;</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 &raquo;</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 &raquo;</a>
      </div>
      <!-- end panel-body -->
    </div>
    <!-- end  panel-primary -->
  </div>
  <!-- end col-md-4 -->
</div>
<!-- end row -->

Ответ 1

Это можно сделать с помощью 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

Ответ 2

Если вы собираетесь использовать загрузочную сетку, я не думаю, что вы найдете простой способ сделать это без хаков, таких как css.

В основном это говорит. Когда ширина экрана больше, чем контрольная точка md в бутстрапе, укажите все элементы класса panel-body, которые являются прямыми потомками элементов столбца, минимальная высота 420px, которая оказывается "магическим числом", которое работает с вашим существующим контентом.

Опять же, я думаю, что это действительно грубое решение, но оно "работает" в крайнем случае.

@media (min-width: 992px) {
  .col-md-4 > .panel > .panel-body {
    min-height: 420px;
  }
}

Здесь статья CSS-Tricks Столбец с равной высотой ширины жидкости, которая охватывает различные способы (display: table и flexbox), чтобы выполнить это. Однако для этой конкретной задачи вам может потребоваться отходить от адаптивной загрузочной сетки.

Кроме того, здесь Полное руководство по Flexbox

Ответ 3

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>

И все это соответствует ожидаемому. Просто следите - он работает только в новых браузерах. Дополнительная информация здесь

Ответ 4

Не нашли ни одного из этих методов 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 в тело

Ответ 5

эта функция находит наибольшую высоту .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();
});

Ответ 6

Я добавляю верхний и нижний paddings в стиле для нижнего <div>.

<div class="xxx" style="padding: 8px 0px 8px 0px">
    ...
</div>

Потому что каждый раз каждый случай отличается, и вам нужно настроить в соответствии с ситуацией.

Инструмент Chrome dev может быть очень полезен в таких ситуациях.