Bootstrap 不等列高度和子 div 高度无法设置

Question

所以我想在里面有一个容器 div div 有三个 div 宽度不等的图片，所以我设置了 col-md-4 ， col- md-4, col-md-4 但在中间图像和另一侧 div 之间还有更多 space 即使它们的高度不是 100%

我的HTML

    <div class="container borders">
     <div class="row nopadding logoblock">
<div class="col-md-4 nopadding">
  <div class="grad proinfo">
    <img src="images/prologo.png" class="center-block">
  </div>
</div>
<div class="col-md-4 nopadding proimg nopadding">
  <img src="images/bliss_nl.jpg" id="asd" class="center-block">
</div>
<div class="col-md-4 nopadding">
  <div class="railway protext">
    <p class="grad">
      A luxurious residential project amidst 
      the pleasing environment of Khar, 
      this imposing 13-storey apartment is a peaceful oasis that exudes opulence and class. 
    </p>
  </div>
</div>

CSS

.logoblock{
    background-image: url(../images/launch_bg.jpg);
}

.borders{
    border-style: solid;
    border-color: #706f6f;
    border-width: 5px;    
}

.railway p{
    padding: 10px 50px;
    color: #aaaaaa;
    line-height: 2.5;
    background-color: #303030;
    margin: 0px;
    text-align: center;
}

.grad{
    background: rgb(70,70,70);
    background: -moz-radial-gradient(center, ellipse cover, rgba(70,70,70,0.50) 0%, rgba(33,33,33,0.50) 100%);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(70,70,70,0.50) 0%,rgba(33,33,33,0.50) 100%);
    background: radial-gradient(ellipse at center, rgba(70,70,70,0.50) 0%,rgba(33,33,33,0.50) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#212121',GradientType=1 );
}

Codepen

我想做什么

我做了什么

Answer 1

试试这个http://codepen.io/anon/pen/VvNGRX

HTML

<div class="container borders">
  <div class="row nopadding logoblock">
    <div class="col-md-4 nopadding grad">
      <div class="proinfo">
        <img class="left-img" src="http://kwebmakerusa.com/samyakth/html/images/prologo.png" class="center-block">
      </div>
    </div>
    <div class="col-md-4 nopadding proimg nopadding">
      <img src="http://kwebmakerusa.com/samyakth/html/images/bliss_nl.jpg" id="asd" class="center-block">
    </div>
    <div class="col-md-4 nopadding grad">
      <div class="railway protext">
        <p>
          A luxurious residential project amidst 
          the pleasing environment of Khar, 
          this imposing 13-storey apartment is a peaceful oasis that exudes opulence and class. 
        </p>
      </div>
    </div>    
  </div>
</div>

CSS

.nopadding{padding: 0px;}

.logoblock{
    background-image: url(http://kwebmakerusa.com/samyakth/html/images/launch_bg.jpg);
}

.borders{
    border-style: solid;
    border-color: #706f6f;
    border-width: 5px;    
}

.railway p{
    padding: 10px 50px;
    color: #aaaaaa;
    line-height: 2.5;
    margin: 0px;
    text-align: center;
}

.grad{
    background: rgb(70,70,70);
    background: -moz-radial-gradient(center, ellipse cover, rgba(70,70,70,0.50) 0%, rgba(33,33,33,0.50) 100%);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(70,70,70,0.50) 0%,rgba(33,33,33,0.50) 100%);
    background: radial-gradient(ellipse at center, rgba(70,70,70,0.50) 0%,rgba(33,33,33,0.50) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#212121',GradientType=1 );
}

.row.nopadding.logoblock {
  display: table;
  height: 100%;
}

.col-md-4.nopadding.grad {
  display: table-cell;
  text-align:center;
  height: 100%;
  float: none;
  vertical-align: middle;
}

.proinfo {
  display: table;
  width: 100%;
}

.left-img {
  display: table-cell;
  vertical-align: middle;
}

.railway.protext {
  display: table;
  height: 100%;
}

.railway p {
  vertical-align: middle;
  display: table-cell;
}

.col-md-4.nopadding.proimg.nopadding {
  display: table;
  text-align: center;
  width: 100%;
}

.col-md-4.nopadding.proimg.nopadding img {
  display: table-cell;
  //width: 100%; //You can uncomment this and see what happend
}

Bootstrap 不等列高度和子 div 高度无法设置

Bootstrap Unequal columns height & child div height can't be set

html

css

height

twitter-bootstrap