Bootstrap 3 的行中所有列的固定列高相同

问题描述 投票：0回答：3

我的代码笔：http://codepen.io/helloworld/pen/razoxg?editors=110

我有 3 行，每 3 列。

如何为每一行或所有 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 &copy; 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;
}
html css twitter-bootstrap
3个回答
3
投票

如果面板的高度未知，或者您不想设置最小高度，则可以使用 CSS flexbox 让每个 

panel
假定每行中最高面板的高度。只需添加这个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%;
}

演示：http://bootply.com/yTIGMotDkp

2
投票

这是一个正在工作的小提琴。

在使用bootstrap时，您总是需要根据需要进行一些更改。您可以通过类将您自己的样式应用到 DOM 元素来覆盖引导样式。

您需要在 

panel height
中定义 
css
，以便您的图块获得相同的高度。

由于您已经在页面中编写了很多

css
，因此我使用全部或您的“css”并对其进行了一些更改。

-1
投票

有多种方法可以做到这一点。您可以将 

height
应用到您的列 

.col-xs-4 {
    height: 150px;
}

但是，如果内容是动态的，这不会很好地工作，因为如果长度超过 150px，它将被隐藏，或者根据 CSS 规则，您将获得滚动。您可以使用 

min-height
，效果会更好，但并不理想。

或者，您可以将 

display: flex
应用于您的 
row
容器元素

.row {
    display: flex;`
    ....
}

这是一个工作示例

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.