我正在嘗試在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; 
}