1

在此处输入图像描述

嗨，我试图像“内联”一样水平排列我的按钮，但它不会让我这样做。我知道 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>
4

2 回答 2

1

In Bootsrap, the grid system (span, row, container) will make all span's appear underneath eachother as soon as you get to the 'phone' size (which I guess is the case here, due to the visible-phone class you added to the footer). You won't be able to rely just on the grid system for this...

There is however a .inline class available to use on ul: http://twitter.github.io/bootstrap/base-css.html#lists

This means that with some reformatting of your markup (which would make sense anyway), you should be able to achieve the desired result, without writing a single line of css yourself:

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

In fact all the extra wrappers (footer, container, row) are not required here, I just kept them as they where present in your code. Only the code from <ul> (without the .span12) to </ul> should do.

For an example, have a look at this: http://jsfiddle.net/jRm3Z/1/

于 2013-07-19T11:43:32.070 回答
0

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

display: list-item;

或者

display: block;

更新 ＃：

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

用。。。来代替

<i class="icon-user icon-white"></div>
于 2013-07-19T10:20:38.503 回答