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

Question

提问by Milan Moffatt

I am new to Bootstrap 3 and I would like to have 3 panels on my landing page of equal height, even though the middle panel has less content. When resized they become the same height, but are not upon initial visit to the page.

我是 Bootstrap 3 的新手，我希望在我的着陆页上有 3 个等高的面板，即使中间面板的内容较少。调整大小后，它们会变成相同的高度，但不会在初次访问页面时出现。

I already tried hiding the overflow with CSS and it cuts off the bottom of the panel which isn't what I want, so I'm thinking I need to use jQuery.

我已经尝试用 CSS 隐藏溢出，它切断了面板的底部，这不是我想要的，所以我想我需要使用 jQuery。

Here is my code:

这是我的代码：

<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

回答by Zim

This can be done with CSS flexbox. Only minimal CSS is needed..

这可以通过 CSS flexbox 来完成。只需要最少的 CSS ..

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

Just add .equalto your .rowand flexbox does the rest.

只需添加.equal到您的.rowflexbox 中即可。

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

UPDATE:Bootstrap 4 uses flexbox so there is no need for the additional CSS. http://www.codeply.com/go/0Aq0p6IcHs

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

Answer 2

回答by jessegavin

If you're going to use the bootstrap grid, I don't think you're going to find an easy way to accomplish this without hacks like the following css.

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

This basically says. When the screen width is greater than the mdbreakpoint in bootstrap, give all the elements with panel-bodyclass which are direct descendants of the column elements a minimum height of 420pxwhich happens to be a "magic number" that works with your existing content.

这基本上说。当屏幕宽度大于mdbootstrap 中的断点时，给所有具有panel-bodyclass的元素，这些元素是列元素的直接后代，其最小高度420px恰好是一个适用于现有内容的“幻数”。

Again, I think this is a really gross solution, but it "works" in a pinch.

同样，我认为这是一个非常粗略的解决方案，但它在紧要关头“有效”。

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

Here's a CSS-Tricks article Fluid Width Equal Height Columnswhich covers various ways (display: table& flexbox) to accomplish this. However, you might need to step away from the responsive bootstrap grid for this particular task.

这是一篇 CSS-Tricks 文章Fluid Width Equal Height Columns，其中涵盖display: table了实现此目的的各种方法 ( & flexbox)。但是，对于此特定任务，您可能需要远离响应式引导网格。

Also, here's the Complete Guide to Flexbox

另外，这里是Flexbox的完整指南

Answer 3

回答by Chris

Bootstrap's solution - add this css and add the class to your row:

Bootstrap 的解决方案 - 添加此 css 并将该类添加到您的行中：

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

It has a couple caveats, as posted at http://getbootstrap.com.vn/examples/equal-height-columns/, but it sounds like it'll be good enough for your case.

它有几个警告，如http://getbootstrap.com.vn/examples/equal-height-columns/ 上发布的那样，但听起来它对您的情况已经足够了。

I also saw this answer here.

我也在这里看到了这个答案。

Update for dynamic number of columns

更新动态列数

Bootstrap automatically wraps columns into new rows when you add more than can fit in one row, but this flexbox approach breaks this. To get flexbox to wrap, I've found you can do something like this:

当您添加的多于一行时，Bootstrap 会自动将列包装到新行中，但这种 flexbox 方法打破了这一点。为了让 flexbox 包装起来，我发现你可以做这样的事情：

-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-align-content: flex-end;
align-content: flex-end;

This is awesome when you have a dynamic number of columns, or columns that change width according to the screen size. So you can have something like this:

当您拥有动态数量的列或根据屏幕尺寸更改宽度的列时，这非常棒。所以你可以有这样的事情：

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

And it all lines up the way it's expected. Just watch out - it only works in newer browsers. More info here

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

Answer 4

回答by Stuart Clark

Haven't found any of these CSS methods to work in my case I am using images in my panels too instead I used a simple JQuery function to get the job done

没有找到任何这些 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
        }

Where the ids "panel-1" and and "panel-2" are in the panel tag choose the largest panel as the one you use to set h and call the function at the end of you html.

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

<body onresize = "resizePanel()">

I also make it so the function is called when if the window is resized by adding the onresize attribute to the body

我也这样做，以便在通过向主体添加 onresize 属性调整窗口大小时调用该函数

Answer 5

回答by Mike Ursitti

this function finds the largest .panel-body height, then makes that the height of all my .panel-body elements.

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

Now that all the panel-bodys are the same, the heights need to be cleared when the window resizes before running the "evenpanels" function again.

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

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

Answer 6

回答by WesternGun

I add top and bottom paddings in style for the lower <div>.

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

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

Because after all each case is different and you have to adjust according to the situation.

因为毕竟每个情况都不一样，你要根据情况进行调整。

Chrome dev tool can be very useful in situations like this.

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

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

提问by Milan Moffatt

回答by Zim

回答by jessegavin

回答by Chris

回答by Stuart Clark

回答by Mike Ursitti

回答by WesternGun

相关推荐

最近更新

标签

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

提问by Milan Moffatt

回答by Zim

回答by jessegavin

回答by Chris

回答by Stuart Clark

回答by Mike Ursitti

回答by WesternGun

相关推荐

CSS CSS3 - DOM 移除的过渡

CSS 使用 bootstrap-sass gem 覆盖 Rails 中的 Bootstrap 变量

CSS css3 是否可以垂直文本溢出？

CSS 当我使用 cakephp 时，我在哪里放置 PIE.htc 文件（用于使 IE 与 CSS3 一起工作）

相关推荐

最近更新

标签