【问题标题】：Putting two divs next to each other with borders in bootstrap 3?在引导程序 3 中将两个带有边框的 div 放在一起？
【发布时间】：2014-01-25 12:14:54
【问题描述】：

我正在尝试对齐 twitter 按钮旁边的一些文本，并让它们都与边框对齐。不幸的是，文本 div 缩小并浮动到左上角及其边框。该按钮看起来不错，因为引导程序正确对齐了所有内容。但是文本和按钮 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%;
    }

【问题讨论】：

jsfiddle.net/ub4TC/36

标签： css twitter-bootstrap html twitter-bootstrap-3

【解决方案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

输出：

【讨论】：

【解决方案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 类。他们只是为了让事情在小提琴上发挥作用。

【讨论】：

@DMelo textdiv 和 btndiv 不是相邻的吗？
我很抱歉。粘贴了错误的链接。请看这个：jsfiddle.net/WNPRA/1
@DMelo 谢谢！如果我有一个较长的文本，如“Text！Text！Text！Text！Text！Text！Text！”，有什么方法可以让 textdiv 自动调整其宽度？现在，如果文本变长，它会溢出到另一个 div，或者如果文本是长句子，它会增加高度。
.mydiv 是否需要为 30% ？
@DMelo 哦，不，它不需要是 30%。但是整个事情应该是btndiv和textdiv的宽度之和。如果两个 div 中的文本都很少，那么 mydiv 应该很小。我添加了 30%，因为这两个 div 一直分开，但我希望它们与边框并排并排，就像你现在拥有的那样。

【解决方案3】：

这里有一个想法给你：
http://jsfiddle.net/panchroma/y79gm/

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

.textdiv{
cursor:default;
}

强制光标在文本块上时保持默认箭头。

祝你好运！

【讨论】：