如何在Bootstrap3中为两列整体制作边框？

Question

我的代码可以预览here（Bootply）

HTML 部分如下所示：

<div class="container">
  <div class="row">
    <a href="#a">
      <div class="my-border">
        <div class="col-md-3">A</div>
        <div class="col-md-3">A1</div>
      </div>
    </a>

    <div class="my-border">
      <a href="#b">
        <div class="col-md-3">B</div>
        <div class="col-md-3">B1</div>
      </a>
    </div>

  </div>

</div>

和 CSS 部分：

.my-border
{
  border: medium double rgb(250,0,255)
}

我想做这样的边框

-----------
|A A1|B B1|
-----------

但我发现边框显示不正确.. 另外，我还有两个问题：

可以在<div class="col-xx">和<div class="row">之间换一个<div class="my-custom-class">吗？如果不是，首选方式是什么？
可以用 <a href="my-custom-link"> 包裹几个 <div> 吗？如果不是，首选方式是什么？

谢谢！

Answer 1

因为my-border的点写错了class，必须把columns divs里面的columns的内容写进去

您也可以使用边框扩展列 div class。

看：http://www.bootply.com/73dXGqF2i5

Answer 2

试试这个：Solution

CSS

 .my-border
  {
  border: medium double rgb(250,0,255)
  }

HTML

 <div class="container">
 <div class="row">
 <center>
 <a href="#a">
 <div class="my-border">
 <div class="col-md-3">A</div>
 <div class="col-md-3">A1</div>
 <a href="#b">
 <div class="col-md-3">B</div>
 <div class="col-md-3">B1</div>
 </a>
 </div>
 </a>
 </center>
  </br>
 <div class="my-border">


 </div>

 </div>

 </div>

如何在Bootstrap3中为两列整体制作边框？

How to make borders for two columns as a whole in Bootstrap3?

html

css

twitter-bootstrap

twitter-bootstrap-3