Twitter Bootstrap 3 - 流体行中的等高面板

Question

我是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 -->

Answer 1

这可以使用CSS flexbox完成.只需要最小的CSS ..

.equal {  
    display: -webkit-flex;
    display: flex;
}

只需添加.equal到您的.row和Flexbox完成剩下的工作.

http://www.codeply.com/go/BZA25rTY45

更新: Bootstrap 4使用flexbox,因此不需要额外的CSS. http://www.codeply.com/go/0Aq0p6IcHs

Answer 2

如果您打算使用引导网格,我认为您不会找到一种简单的方法来实现这一点,而不会像下面的CSS一样.

这基本上说.当屏幕宽度大于mdbootstrap中的断点时,给出所有具有panel-body类的元素,这些元素是列元素的直接后代,其最小高度420px恰好是与您现有内容一起使用的"幻数".

同样,我认为这是一个非常重要的解决方案,但它"有效".

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

这是CSS-Tricks文章Fluid Width Equal Height Columns,它涵盖display: table了实现此目的的各种方式(&flexbox).但是,您可能需要离开响应引导网格以执行此特定任务.

此外,这是Flexbox的完整指南

Answer 3

Bootstrap的解决方案 - 添加此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>

这一切都按照预期的方式排列.请注意 - 它只适用于较新的浏览器.更多信息在这里