Question

我想使用Bootstrap创建3个具有相同高度的盒子，但我不知道该怎么做。

我发现我可以使用flexbox，我的主框将是相同的高度，但我想要一些内部div有边框和div来填充主div，我不能这样做。

我还有一些其他的问题：如何在该div的中心底部定位按钮，我还有一些描述段落，我希望那些paragrahps也是相同的高度，因为我在底部使用了一些边框。

这是我的示例代码：

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">
      <div class="box">
        <div class="box-header">
        </div>
        <div class="box-body">
          <p class="box-info">Some description of product 1</p>
          <ul class="box-list">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
          </ul>
          <button class="btn btn-default">Register</button>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="box">
        <div class="box-header">
        </div>
        <div class="box-body">
          <p class="box-info">Some description of product 2 which can be very loooooooooooooong</p>
          <ul class="box-list">
            <li>test</li>
            <li>test</li>
            <li>test</li>
          </ul>
          <button class="btn btn-default">Register</button>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="box">
        <div class="box-header">
        </div>
        <div class="box-body">
          <p class="box-info">Some description of product 3</p>
          <ul class="box-list">
            <li>test</li>
            <li>test</li>
            <li>test</li>
          </ul>
          <button class="btn btn-default">Register</button>
        </div>
      </div>
    </div>
  </div>
</div><!-- /.container -->

的CSS：

body {
  padding-top: 50px;
}
.box-header {
    height: 100px;
    background-color: blue;
    text-align: center;
}
.box-body {
    position: relative;
    padding: 20px 30px;  
    border: 1px solid green;
    border-top: none;
}

.box-info {
    border-bottom: 1px solid #e7e7e7;
}
.box-list {
    text-align: left;
}

我的描述不清楚，因此您可以在此处找到Bootply。

使用Bootstrap创建3个价格框

0 个答案: