twitter-bootstrap 使用引导程序 3 为一行中的所有列提供相同的固定列高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28276111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Same fixed column height for all columns in a row with bootstrap 3
提问by Elisabeth
My codepen: http://codepen.io/helloworld/pen/razoxg?editors=110
我的代码笔：http://codepen.io/helloworld/pen/razoxg?editors=110
I have 3 rows with each 3 columns.
我有 3 行，每 3 列。
How can I give each row or all 3 columns the same fixed height so one tile is not larger than the other?
我怎样才能给每一行或所有 3 列相同的固定高度，这样一个瓷砖不大于另一个？
<div class="container-fluid">
<!-- Page Header -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Electronics
</h1>
</div>
</div>
<!-- /.row -->
<!-- 1st Row -->
<div class="row">
<div class="col-xs-4">
<div class="panel industry-tile-medium">
<div class="panel-body">
<header>Customer</header>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://s16.postimg.org/tqs90puwl/customer.png"></img>
</div>
<div class="col-xs-6 col-bottom">
<ul class="list-group">
<li class="list-group-item ">Intel</li>
<li class="list-group-item ">Micron</li>
<li class="list-group-item ">Infineon</li>
<li class="list-group-item ">First Solar</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<div class="col-xs-4">
<div class="panel special-tile">
<div class="panel-body special-tile">
</div>
<div class="panel-footer special-tile">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" src="http://s7.postimg.org/agarkavmj/whoiswho.png"></img>
</div>
<div class="col-xs-9" >
<div class="row">
<div id="page-header" class="page-header">
<h4>Who is who
<p>
<small>Organization & Processes</small>
</p>
</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<ul class="list-group">
<li class="list-group-item ">Org Charts </li>
<li class="list-group-item ">GAM / KAM Charts</li>
<li class="list-group-item ">Process flow</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.col -->
<div class="col-xs-4">
<div class="panel industry-tile-medium">
<div class="panel-body">
<header>CEO Blog</header>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-3">
<i style="color:orange;" class="fa fa-rss-square fa-5x"></i>
</div>
<div class="col-xs-9">
Lorem ipsum dolor sit amet, consetetur sadipscetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
</div>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<!-- column -->
</div>
<!-- /.row -->
<!-- 2nd Row -->
<div class="row">
<div class="col-xs-4">
<div class="panel industry-tile-medium">
<div class="panel-body">
<header>On-going Projects & Webcam</header>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://s16.postimg.org/tqs90puwl/customer.png"></img>
</div>
<div class="col-xs-6 col-bottom">
<ul class="list-group">
<li class="list-group-item ">GF Project Malta</li>
<li class="list-group-item ">Intel Israel</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.col -->
<div class="col-xs-4">
<div class="panel personal-tile-medium">
<div class="panel-body">
<header> Personal Links </header>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-12">
<ul class="list-group">
<li class="list-group-item ">Org Charts</li>
<li class="list-group-item ">GAM / KAM Charts</li>
<li class="list-group-item ">Process flow</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<div class="col-xs-4">
<div class="row half-tile half-tile-top">
<div class="col-xs-6">
<img class="img-responsive" src="http://s16.postimg.org/tqs90puwl/customer.png"></img>
</div>
<div class="col-xs-6">
Presentations
</div>
</div>
<!-- ./row -->
<div class="row half-tile">
<div class="col-xs-6">
<img class="img-responsive" src="http://s16.postimg.org/tqs90puwl/customer.png"></img>
</div>
<div class="col-xs-6">
Events, Trade Shows & Conferences
</div>
</div>
<!-- ./row -->
</div>
</div>
<!-- 3rd Row -->
<div class="row">
<div class="col-xs-4 portfolio-item">
<div class="panel industry-tile-medium">
<div class="panel-body">
<header>Project Library and References</header>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://s1.postimg.org/go41exp63/Reports.png"></img>
</div>
<div class="col-xs-6">
<ul class="list-group">
<li class="list-group-item">GF Project Malta</li>
<li class="list-group-item">Intel Israel</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<div class="col-xs-4">
<div class="panel branch-tile-medium">
<div class="panel-body">
<header>Industry Links</header>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-12">
<ul class="list-group">
<li class="list-group-item"> <a href="#">www.semi.org</a></li>
<li class="list-group-item"><a href="#">www.vdma.org</a></li>
<li class="list-group-item"><a href="#">www.visi.org</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<div class="col-xs-4 portfolio-item">
<div class="panel branch-tile-medium">
<div class="panel-body">
<header>Competition</header>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-12">
<ul class="list-group">
<li class="list-group-item"> <a href="#">CH2MHill</a></li>
<li class="list-group-item"><a href="#">Bechtel</a></li>
<li class="list-group-item"><a href="#">Jacobs Engineering</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.panel -->
</div>
</div>
<!-- /.row -->
<hr>
<!-- News -->
<div class="row">
<!-- Electronic news -->
<div class="col-xs-6">
<div class="panel industry-tile-medium">
<div class="panel-body">
<header>Electronic News</header>
</div>
<div class="panel-footer">
<div class="row">
<div>
<ul>
<li>05-Dec ATF in-house news channel</li>
<li>06-Dec ATF in-house news channel</li>
<li>07-Dec ATF in-house news channel</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<!-- Industry News -->
<div class="col-xs-6">
<div class="panel branch-tile-medium">
<div class="panel-body">
<header>Industry News</header>
</div>
<div class="panel-footer">
<div class="row">
<div>
<ul>
<li>05-Dec links to global news</li>
<li>06-Dec links to global news</li>
<li>07-Dec links to global news</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.panel -->
</div>
</div>
<!-- /.row -->
<hr>
<!-- Copyright -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © XXX</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
* {
Box-sizing: Border-box;
border-radius: 0 !important; /* Remove rounded borders from whole layout */
}
.special-tile{
background:#006AB3;
}
.special-tile h4, .special-tile small, .special-tile {
color:white;
}
.special-tile .panel-body{
padding:0;
}
.special-tile .panel-footer{
border:0;
}
.half-tile{
background:#006AB3;
color:white;
}
.half-tile-top{
margin-bottom:10px;
}
.industry-tile-medium{
background: #006AB3;
border: 1px solid #006AB3;
}
.industry-tile-medium .panel-footer{
background: #F0F8FF;
color:#006AB3;
}
.branch-tile-medium{
background: #006B66;
border: 1px solid #006B66;;
}
.branch-tile-medium .panel-footer{
background: #EFFDFC;
}
.branch-tile-medium .panel-footer a{
color: #006B66;
}
.personal-tile-medium{
background: #5E9629;
border: 1px solid #5E9629;
}
.personal-tile-medium .panel-footer{
background: #F2FEE7;
color: #5E9629;
}
ul
{
list-style-type:none;
}
ul li a{
text-decoration:underline;
}
.panel .panel-body header
{
color:white;
font-weight:bold;
font-size:1.2em;
}
.list-group-item {
background:transparent;
padding:5px 5px;
}
.panel-body{
padding:6px;
}
采纳答案by Suhaib Janjua
Here is a working Fiddle.
这是一个工作小提琴。
While using bootstrap, you need to always need to make some changes according to your need. You can override the bootstrap style by applying your own styles through classes to DOM elements.
在使用 bootstrap 时，您总是需要根据需要进行一些更改。您可以通过将自己的样式通过类应用到 DOM 元素来覆盖引导程序样式。
You need to define panel heightin your cssso that your tiles will get the same height.
您需要panel height在您的中定义，css以便您的瓷砖将获得相同的高度。
As you have already written a lot of cssin your page, so I use all or your 'css' and made some changes in it.
因为你已经css在你的页面上写了很多，所以我使用了你的全部或你的“css”并对其进行了一些更改。
回答by Zim
If the height of the panels is unknown, or you don't want to set a min height, you can have each panelassume the height of the tallest panel in each row using CSS flexbox. Just add this CSS..
如果面板的高度未知，或者您不想设置最小高度，您可以panel使用 CSS flexbox 让每个面板假设每行中最高面板的高度。只需添加此CSS ..
.row, .row > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 0 auto;
}
.panel {
width:100%;
}
回答by Pattle
There are a number of ways you can do this. You could apply a heightto your columns
有多种方法可以做到这一点。您可以将 aheight应用于您的列
.col-xs-4 {
height: 150px;
}
However this wont' work very well if the content is dynamic because if the length exceeds 150px it will be hidden or you'll get scrolling depending on your CSS rules. You could use min-heightwhich will work better but not ideal.
但是，如果内容是动态的，这将不会很好地工作，因为如果长度超过 150 像素，它将被隐藏，或者您将根据您的 CSS 规则滚动。您可以使用min-height哪个效果更好但不理想。
Alternatively you could apply display: flexto your rowcontainer element
或者，您可以应用于display: flex您的row容器元素
.row {
display: flex;`
....
}
Here is a working exampleof that
这是一个工作示例的说
