带有DIV和边框的Bootstrap网格

Question

我正在尝试学习一些bootstrap的基础知识。我想得到一个如下图所示的网格

获得它的最佳途径是什么？

使用div[class*=col-] {border: 1px solid #ccc}，我会得到一些双边框：/

谢谢你！

//编辑： 的 CSS：

.next .row {
    margin-bottom:5px;
}

.next .row [class*="col-"] {
  padding: 0;
  margin: 0;
  min-height: 50px;
  border:1px solid #ccc;
}
.next .row [class*="col-"]:last-child  {
  border-left:0;
  border-right:0;
  border-bottom:0;
  height:100%;
}

.next .row [class*="col-md"]:first-child  {
  border:none;
}

@media(min-width:992px){
    .next .row [class*="col-"]:first-child  {
      border-bottom:1px solid #ccc;
      border-right:none;
    }
}

HTML：

<div class="container next">
    <div class="row">
        <div class="col-xs-10">
            <div class="col-md-7 ">1</div>
            <div class="col-md-5 ">2</div>
        </div>
        <div class="col-xs-2">
            <div class="col-md-12 ">3</div>
        </div>
    </div>
</div>

Answer 1

试试这个：

div[class*=col-] {border-right: 1px solid #ccc; border-bottom:1px solid #ccc;}
div[class*=col-]:first-child {border-left: 1px solid #ccc; border-top:1px solid #ccc;}