在bootstrap 3中将两个div放在一起并带有边框？

Question

我正在尝试将一些文本与twitter的按钮对齐，并将它们全部与边框对齐。不幸的是，文本div缩小并浮动到左上角及其边框。按钮似乎很好，因为bootstrap正确对齐一切。但是文本和按钮div都会出现填充（或边距）问题，因为边框不会排列成矩形（文本和按钮div之间也有边框线）。

这就是我的目标：

灰色的1px边框应该是相同的，但我的触摸板有问题。

这是我到目前为止所做的：

                             <div class="mydiv">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="col-sm-6">
                                            <div class="textdiv">
                                                 Text!
                                            </div>
                                        </div>

                                        <div class="col-sm-6">
                                            <div class="btndiv">    
                                                <a class="btn" href="#">Button!</a>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>

CSS：

 .textdiv {
         border-top: 1px solid #DDDDDD;
         border-left: 1px solid #DDDDDD;
         border-right: 1px solid #DDDDDD;
         border-bottom: 1px solid #DDDDDD;
         margin: 0 auto;
    }
    .btndiv {
         border-top: 1px solid #DDDDDD;
         border-bottom: 1px solid #DDDDDD;
         border-right: 1px solid #DDDDDD;
    }
    .mydiv {
         width:30%;
    }

Answer 1

<强> HTML

<div class="mydiv">
    <div class="row">
        <div class="col-md-12">
            <div class="col-sm-6">
                <div class="textdiv">Text!</div>
            </div>
            <div class="col-sm-6">
                <div class="btndiv"> <a class="btn" href="#"> Button!</a>

                </div>
            </div>
        </div>
    </div>
</div>

<强> CSS

.row {
    width:250px;
    margin:0px auto;
    border:1px solid black;
    height:75px;
    background-color:#f2f2f2;
}
col-sm-6 {
    width:200px;
    margin:0px auto;
    text-align:center;
}
div.textdiv {
    border:1px solid #9a9a9a;
    background-color:Aqua;
    padding:5px;
    color:black;
    font: bold 16px arila;
    width:100px;
    float:left;
    text-align:center;
    margin-left:10px;
    margin-top:25px;
    margin-right:3px;
}
div.col-sm-6 a {
    border:1px solid #9a9a9a;
    margin:0px auto;
    background-color:Aqua;
    color:black;
    text-decoration:none;
    font: bold 16px arila;
    width:100px;
    padding:5px;
    margin-left:3px;
    margin-right:10px;
    margin-top:25px;
    float:right;
    text-align:center;
}

Working Fiddle

<强>输出：

Answer 2

我刚刚对事情的填充方式进行了一些更新。请在随后的小提琴上拿一个懒人： http://jsfiddle.net/WNPRA/1/

我创建了一个新类来处理一些问题，并将css更新为更整洁。

div.no-padding {
    padding: 0;
}

div.textdiv {
    padding: 7px 12px 7px 12px ;
    text-align: center;
}

请不要考虑我添加的col-xs-6类。他们只是为了让事情变得小巧。

Answer 3

这是你的一个想法：
http://jsfiddle.net/panchroma/y79gm/

除了我在.btndiv类中设置textdiv块（提供边框）之外，html与你的几乎完全相同，将btn类添加到.textdiv，以便它继承与btn链接相同的引导样式，我添加了

.textdiv{
cursor:default;
}  

强制光标在文本块上方保留为默认箭头。

祝你好运！