我正在尝试在twitter按钮旁边对齐一些文本，并让它们全部与边框对齐。不幸的是，文本div缩小并浮动到左上角并带有边框。按钮看起来很好，因为bootstrap正确对齐所有内容。但是文本和按钮div都会因为填充（或边距）问题而受到影响，因为边框不会排成一个矩形（文本和按钮div之间也有边框线）。将两个div在引导程序3中放置在边界旁边？

这是我的目标：

enter image description here

灰色边框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%; 
    }

来源

2014-01-25 user21398

http://jsfiddle.net/ub4TC/36/ –

我只是在事物的方式做了一些更新，得到他们的填充。请在下面的小提琴中取乐： http://jsfiddle.net/WNPRA/1/

我创建了一个新的类来处理一些问题并更新了css以使其更加整洁。

div.no-padding { 
    padding: 0; 
} 

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

请不要考虑我添加的col-xs-6类。他们只是为了让事情在小提琴上工作。

来源

2014-01-25 03:55:58

@DMelo textdiv和btndiv并不相邻，但是？ – user21398

我很抱歉。粘贴错误的链接。看看这一个，请：http://jsfiddle.net/WNPRA/1/ –

@DMelo谢谢！如果我有更长的文本，比如“Text！Text！Text！Text！Text！Text！Text！Text！”，有什么办法让textdiv auto调整它的宽度？现在，如果文本变得更长，或者如果文本是一个长句子，文本变得更高，它会溢出到另一个div中。 – user21398

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; 
}