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那样破解。

这基本上说。当屏幕宽度大于bootstrap中的md断点时，给出具有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＆amp; flexbox）。但是，您可能需要远离此特定任务的响应式引导网格。

此外，这是Complete Guide to 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/张贴了一些警告，但听起来它对你的情况来说已经足够好了。

我也看到了这个答案here。

动态列数更新

当你添加超过一行可以容纳的行时，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>

这一切都按照预期的方式排列。请注意 - 它只适用于较新的浏览器。 More info here

Answer 4

Haven没有发现任何这些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
        }

ids＆＃34; panel-1＆＃34;和＆＃34; panel-2＆＃34;在面板标签中选择最大的面板作为用于设置h的面板，并在html的末尾调用该函数。

<body onresize = "resizePanel()">

我也这样做，所以如果通过将onresize属性添加到正文来调整窗口大小，则调用该函数

Answer 5

此函数找到最大的.panel-body高度，然后将其作为所有.panel-body元素的高度。

const char*

既然所有的面板都是相同的，那么在窗口调整大小之前需要清除高度，然后才能运行＆＃34; evenpanels＆＃34;再次发挥作用。

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
}

Answer 6

我为较低的<div>添加了风格的顶部和底部填充。

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

因为毕竟每个案例都不同，你必须根据情况进行调整。

Chrome开发工具在这种情况下非常有用。

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

6 个答案: