如何在twitter bootstrap中排列我的按钮

Question

嗨，我试图像“内联”一样水平排列我的按钮，但它不会让我。我知道btn-group但是我不能像我想要的那样在按钮之间留有空间，因为它们彼此相连。所以我试图在没有btn-group的情况下水平对齐它们 这是我的代码：

<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中，一旦你达到“手机”大小，网格系统（跨度，行，容器）将使所有跨度出现在彼此之下（我猜这是由于可见电话类的情况）你添加到页脚）。你将无法仅仅依靠网格系统......

然而，ul上可以使用.inline类：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

我建议将Row div设为UL，列表LI标签中的其他元素。 然后你应该能够修改你的CSS代码：

display: list-item;

或

display: block;

更新＃：

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

替换为

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