Html Bootstrap不等列高度&；子分区高度可以'；不可能

所以我想在这个div里面有一个容器div有三个不同宽度的div，如图所示，所以我设置了col-md-4，col-md-4，col-md-4，但是中间图像和其他侧div之间有更多的空间，即使它们的高度不是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>    

我想做什么

我所做的 试试这个

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>

---

这解决了高度问题，但它没有响应&而且中间图像和侧面div之间的空间仍然存在

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

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