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

Posted 2023-02-23

【中文标题】Twitter Bootstrap 3 - 流动行中等高的面板

【英文标题】：Twitter Bootstrap 3 - Panels of Equal Height in a Fluid Row

【发布时间】：2013-12-28 11:27:14

【问题描述】：

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

【问题讨论】：

引导程序 3 中没有可用的 row-fluid 类。您应该使用 .row

【参考方案1】：

如果您要使用引导网格，我认为您不会找到一种简单的方法来完成此任务，而无需像以下 css 这样的 hack。

这基本上是说。当屏幕宽度大于引导程序中的md 断点时，为列元素的直接后代的panel-body 类的所有元素提供420px 的最小高度，这恰好是一个有效的“幻数”与您现有的内容。

再次，我认为这是一个非常糟糕的解决方案，但它在紧要关头“有效”。

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

这是一篇 CSS 技巧文章 Fluid Width Equal Height Columns，其中涵盖了实现此目的的各种方法（display: table 和 flexbox）。但是，您可能需要离开响应式引导网格来执行此特定任务。

另外，这里是Complete Guide to Flexbox

【讨论】：

我有同样的问题，但没有找到更好的方法。

尽管这不是一个好的解决方案，但它确实有效。

【参考方案2】：

这可以通过 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

【讨论】：

在.col 中使用图像 100% 时无法正常工作

@Skelly：在您的示例中，如果您将浏览器的大小调整为较低的宽度，则每个单独面板的宽度也会发生变化，并且它们变得不一致（一个比另一个宽）。有没有办法保持宽度成比例/一致？

当你也有.panel-footer时它不起作用。

我把它放在@media(min-width:992px) 块中，效果很好。谢谢！

@GridTrekkor 我对宽度也有同样的问题，只需添加 .panel width: 100% 即可解决。为答案+1，帮助了我

【参考方案3】：

在我的情况下，还没有发现任何这些 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
        

在面板标签中的ID“panel-1”和“panel-2”选择最大的面板作为您用来设置h并在html末尾调用函数的面板。

<body onresize = "resizePanel()">

我也这样做了，如果通过将 onresize 属性添加到 body 来调整窗口大小时调用该函数

【讨论】：

您可以添加到此功能，以便它自动找到最大的面板，但在我的情况下它不值得花时间

【参考方案4】：

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

【参考方案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

现在所有的面板主体都是相同的，在再次运行“evenpanels”函数之前，需要在窗口调整大小时清除高度。

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

【参考方案6】：

我为下部 <div> 添加了样式的顶部和底部填充。

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

因为毕竟每一种情况都不一样，要根据情况来调整。

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