如何排隊我的按鈕，在Twitter的引導

Question

嗨即時試圖去排隊我的按鈕水平像「內聯」，但它不會讓我。我知道btn-group，但是我不能在按鈕之間留下空間，就像我想要的一樣，因爲它們彼此相連。所以我試着去他們沒有BTN-組水平對齊 這裏是我的代碼：

<footer class="bottom visible-phone"> 
    <div class="container"> 
     <div class="row text-center"> 
    <div class="span1"><a class="btn btn-primary btn-small" href="#"> 
    <div class="icon-user icon-white"></div> Facebook</a></div> 
    <div class="span1"><a class="btn btn-info btn-small" href="#"> 
    <div class="icon-user icon-white"></div> Twitter</a></div> 
    <div class="span1"><a class="btn btn-danger btn-small" href="#"> 
    <div class="icon-user icon-white"></div> Youtube</a></div> 
    <div class="span1"><a class="btn btn-small" href="#"> 
    <div class="icon-user"></div> Instagram</a></div> 
</div><!--row END--> 
</div><!--container END--> 
</footer> 

Answer 1

在Bootsrap中，網格系統（跨度，行，容器）將使所有跨度出現在彼此之下，只要你達到'手機'的大小（我猜這是這裏的情況，由於你添加到頁腳的可見電話類）。你將不能夠僅僅依靠這個網格系統上...

然而，有一個可用的類.inline對ul使用：http://twitter.github.io/bootstrap/base-css.html#lists

這意味着，您的標記的一些格式化（這將使意義是這樣），你應該能達到預期的效果，而無需編寫CSS單行自己：

<footer class="bottom visible-phone"> 
    <div class="container"> 
     <div class="row text-center"> 
      <ul class='inline span12'> 
       <li><a class="btn btn-primary btn-small" href="#"> 
        <i class="icon-user icon-white"></i> Facebook</a> 
       </li> 
       ... 
      </ul> 
     </div> 
     <!--row END--> 
    </div> 
    <!--container END--> 
</footer> 

其實所有的額外包裝（頁腳，集裝箱，行）在這裏不需要，我只是保留它們，因爲它們出現在你的代碼中。只有代碼從<ul>（沒有.span12）到</ul>應該做。

舉一個例子，看看這個：http://jsfiddle.net/jRm3Z/1/

Answer 2

我會建議makeing該行的div的UL和列表L1標籤的其他元素。 那麼你應該能夠修改你的CSS代碼：

display: list-item; 

或

display: block; 

更新＃：

<div class="icon-user icon-white"></div> 

替換

<i class="icon-user icon-white"></div>