Twitter Bootstrap 3 - 流体行中的等高面板-Java 学习之路

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

6 回答

7
这可以使用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
回复于 2024-04-29T19:04:36+08:00
58
如果您打算使用引导网格，我认为您不会找到一种简单的方法来实现这一点，而不会像下面的CSS一样 .

这基本上说 . 当屏幕宽度大于bootstrap中的 md 断点时，为 panel-body class赋予所有元素，这些元素是列元素的直接后代，最小高度为 420px ，恰好是与现有内容一起使用的"magic number" .

再说一次，我认为这是一个非常重要的解决方案，但它在紧要关头 .
```
@media (min-width: 992px) {
  .col-md-4 > .panel > .panel-body {
    min-height: 420px;
  }
}
```
这是一篇CSS-Tricks文章Fluid Width Equal Height Columns，它涵盖了实现这一目标的各种方式（ display: table ＆flexbox） . 但是，您可能需要离开响应引导网格以执行此特定任务 .

另外，这是Complete Guide to Flexbox
回复于 2024-04-29T19:04:36+08:00
1
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 .

Update for dynamic number of 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>
```
这一切都按照预期的方式排列 . 请注意 - 它只适用于较新的浏览器 . More info here
回复于 2024-04-29T19:04:36+08:00
2
没有找到任何这些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“panel-1”和“panel-2”位于面板标签中，请选择最大的面板作为用于设置h的面板，并在html的末尾调用该功能 .
```
<body onresize = "resizePanel()">
```
我也这样做，所以当通过向主体添加onresize属性来调整窗口大小时调用该函数
回复于 2024-04-29T19:04:36+08:00

此函数找到最大的.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
}

现在所有的面板都是相同的，在窗口调整大小之前需要清除高度，然后再次运行“evenpanels”功能 .

$(window).resize(function () { 
        $(".panel-body").each(function(){
            $(this).css('height',"");           // clear height values
        });                                     
        evenpanels();
});

回复于 2024-04-29T19:04:36+08:00

8
我为下面的 <div> 添加了顶部和底部填充 .
```
<div class="xxx" style="padding: 8px 0px 8px 0px">
    ...
</div>
```
因为毕竟每个案例都不同，你必须根据情况进行调整 .

Chrome开发工具在这种情况下非常有用 .
回复于 2024-04-29T19:04:36+08:00

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

6 回答

相关问题