我的代码：
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;
}

最佳答案 这是一个工作
Fiddle.

使用bootstrap时,您需要始终根据需要进行一些更改.您可以通过将类自己的样式应用于DOM元素来覆盖引导样式.

您需要在css中定义面板高度,以便您的瓷砖达到相同的高度.

因为你已经在你的页面中写了很多css,所以我使用了全部或你的’css’并对其进行了一些更改.