如何使这个网格布局始终保持相同大小的bootstrap 3?

时间:2015-06-26 19:41:51

标签: html css twitter-bootstrap

我试图制作内部带有图像的网格布局,图像的大小始终不变,其中一些似乎使网格的布局略小,我无法做到找出一种让它们具有相同尺寸的方法。

这是HTML。

<div class="col-xs-12">
  <div class="row">
  <h2>Handheld Consoles</h2>
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
    <a href="#">
      <div class="tile purple text-center">
        <h3 class="title">Nintendo 3DS</h3>
        <div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/3ds.png" /></div>
      </div>
    </a>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
    <a href="#">
      <div class="tile red text-center">
        <h3 class="title">Nintendo GBA</h3>
        <div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/gba.png" /></div>
      </div>
    </a>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
    <a href="#">
      <div class="tile orange text-center">
        <h3 class="title">Nintendo 64</h3>
        <div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/n64.png" /></div>
      </div>
    </a>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
    <a href="#">
      <div class="tile green text-center">
        <h3 class="title">Sony PSP</h3>
        <div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/psp.png" /></div>
      </div>
    </a>
    </div>
  </div>
</div>

和CSS。

.tile {  
    width:100%;
    display: inline-block;
    box-sizing: border-box;
    background: #fff;       
    padding: 15px;
    margin-bottom: 20px;
    color:#fff;
} 
.title {
    margin-top: 0px;
    text-align:center;
}
.purple {
    background: #5133AB;
}
.purple:hover {
    background: #3e2784;
}

enter image description here

1 个答案:

答案 0 :(得分:0)

我相信如果您只设置height类的.tile,它应该可以正常工作

.tile {  
    width:100%;
    display: inline-block;
    box-sizing: border-box;
    background: #fff;       
    padding: 15px;
    margin-bottom: 20px;
    color:#fff;
    height: 200px; // or whatever height you want all the tiles to be
}