引導包裝按鈕不對齊

我有一組按鈕在桌面上很好地對齊，但在移動時，當按鈕環繞時，第二排按住第一組按鈕並開始一點點內部。引導包裝按鈕不對齊

請看下面的小提琴的問題; https://jsfiddle.net/u4dq9x38/

HTML：

<div role="toolbar" class="btn-toolbar bottom-buffer"> 
    <a class="btn btn-default btn-sm" href=""> 
     <span aria-hidden="true" class="glyphicon glyphicon-backward"></span> 
     Button 
    </a> 
    <a class="btn btn-default btn-sm" href=""> 
     <span aria-hidden="true" class="glyphicon glyphicon-backward"></span> 
     Button 
    </a> 
    <a class="btn btn-default btn-sm" href=""> 
     <span aria-hidden="true" class="glyphicon glyphicon-backward"></span> 
     Button 
    </a> 
    <a class="btn btn-default btn-sm" href=""> 
     <span aria-hidden="true" class="glyphicon glyphicon-backward"></span> 
     Button 
    </a> 
    <a class="btn btn-default btn-sm" href=""> 
     <span aria-hidden="true" class="glyphicon glyphicon-backward"></span> 
     Button 
    </a> 
    <a class="btn btn-default btn-sm" href=""> 
     <span aria-hidden="true" class="glyphicon glyphicon-backward"></span> 
     Button 
    </a> 
    <a class="btn btn-default btn-sm" href=""> 
     <span aria-hidden="true" class="glyphicon glyphicon-backward"></span> 
     Button 
    </a> 
</div>

有什麼辦法解決這一問題？

來源

2015-05-19 Teoman shipahi

也許這樣https://jsfiddle.net/soledar10/wcju61r0/或https://jsfiddle.net/soledar10/kwd2jh96/ – Dmitriy

取出btn-toolbar類，好像它的第一個元素之前增加了一個空間，所以沒有設計用於包裝

您可能需要一個底部和右側邊距添加到每個按鈕單獨

來源

2015-05-19 16:38:01 cowls

看起來更好的知道，看起來像我需要添加底邊距CLA ss手動到每個按鈕？ –

是的，似乎如此:) – cowls

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
} 
 
.btn-toolbar>.btn:nth-child(1){ 
 
    margin-left: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<div role="toolbar" class="btn-toolbar bottom-buffer"> 
 
       <a class="btn btn-default btn-sm" href=""> 
 
      <span aria-hidden="true" class="glyphicon glyphicon-backward"></span> 
 
      Button 
 
     </a> 
 
    <a class="btn btn-default btn-sm" href=""> 
 
      <span aria-hidden="true" class="glyphicon glyphicon-backward"></span> 
 
      Button 
 
     </a> 
 
    <a class="btn btn-default btn-sm" href=""> 
 
      <span aria-hidden="true" class="glyphicon glyphicon-backward"></span> 
 
      Button 
 
     </a> 
 
    <a class="btn btn-default btn-sm" href=""> 
 
      <span aria-hidden="true" class="glyphicon glyphicon-backward"></span> 
 
      Button 
 
     </a> 
 
    <a class="btn btn-default btn-sm" href=""> 
 
      <span aria-hidden="true" class="glyphicon glyphicon-backward"></span> 
 
      Button 
 
     </a> 
 
    <a class="btn btn-default btn-sm" href=""> 
 
      <span aria-hidden="true" class="glyphicon glyphicon-backward"></span> 
 
      Button 
 
     </a> 
 
    <a class="btn btn-default btn-sm" href=""> 
 
      <span aria-hidden="true" class="glyphicon glyphicon-backward"></span> 
 
      Button 
 
     </a> 
 
    </div>

工作

來源

2015-05-19 17:04:42 Dmitriy

引導包裝按鈕不對齊

回答

相關問題