html - 我想将col-sm-4转换为Twitter bootsrap底部的两个相等的列和一行

我已经在一行中创建了三列col-sm-4，col-sm-4，col-sm-4，并且每一列都必须拆分为两行相等并且在行脚处一行。就像下面的图像一样，

This is the sample alignment image

我的代码是

 <div class="container">
      <div class="row">
        <div class="col-sm-4">
          <div class="panel panel-primary" onclick="location.href='game.aspx?id=2'" style="cursor: pointer;">


            <div class="panel-heading">BLACK FRIDAY DEAL</div>
            <div class="panel-body"><img src="Images/150x80_4.jpg" class="img-responsive" style="width:100%" alt="Image"></div>
            <div class="panel-footer">Buy 50 mobiles and get a gift card</div>

          </div>
        </div>

        <div class="col-sm-4">
          <div class="panel panel-primary" onclick="location.href='game.aspx?id=2'" style="cursor: pointer;" >
            <div class="panel-heading">BLACK FRIDAY DEAL</div>
            <div class="panel-body"><img src="Images/150x80_5.jpg" class="img-responsive" style="width:100%" alt="Image"></div>
            <div class="panel-footer">Buy 50 mobiles and get a gift card</div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="panel panel-primary" onclick="location.href='game.aspx?id=2'" style="cursor: pointer;">
            <div class="panel-heading">BLACK FRIDAY DEAL</div>
            <div class="panel-body"><img src="Images/150x80_4.jpg" class="img-responsive" style="width:100%" alt="Image"></div>
            <div class="panel-footer">Buy 50 mobiles and get a gift card</div>
          </div>
        </div>
      </div>
    </div>

请给出解决方案。

最佳答案

为此，您可以使用以下HTML结构：

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="row">
                <div class="col-sm-6"></div>
                <div class="col-sm-6"></div>
                <div class="col-sm-12"></div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="row">
                <div class="col-sm-6"></div>
                <div class="col-sm-6"></div>
                <div class="col-sm-12"></div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="row">
                <div class="col-sm-6"></div>
                <div class="col-sm-6"></div>
                <div class="col-sm-12"></div>
            </div>
        </div>
    </div>
</div>

关于html - 我想将col-sm-4转换为Twitter bootsrap底部的两个相等的列和一行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42710734/