Bootstrap:对齐同一行上的两个按钮

Question

基本上我正在尝试这样做,以获得在网站的另一侧但在同一行上的两个按钮.这是它的样子:

这是我的代码:

             <div class="panel-footer"><!-- panel-footer -->

              <div class="previous">
                  <button type="button" class="btn btn-default btn-lg">
                      <span class="glyphicon glyphicon-chevron-left"></span>
                  </button>
              </div>

              <div class="next">
                  <button type="button" class="btn btn-default btn-lg">
                      <span class="glyphicon glyphicon-chevron-right"></span>
                  </button>
              </div>

          </div><!-- end panel-footer -->

这里是类'之前'和'下一个'的CSS.

.previous {
text-align: left;
}

.next {
text-align: right;
}

谢谢.如果有帮助,我正在使用bootstrap.

Answer 1

将它们包装在两个单独的列中,如下所示:

<div class="panel-footer row"><!-- panel-footer -->
    <div class="col-xs-6 text-left">
        <div class="previous">
          <button type="button" class="btn btn-default btn-lg">
              <span class="glyphicon glyphicon-chevron-left"></span>
          </button>
        </div>
    </div>
    <div class="col-xs-6 text-right">   
        <div class="next">
          <button type="button" class="btn btn-default btn-lg">
              <span class="glyphicon glyphicon-chevron-right"></span>
          </button>
        </div>
    </div>
</div><!-- end panel-footer -->

顺便说一句,您可以使用内置的帮助程序类text-left/text-right,就​​像我在列div上所做的那样,因此您不需要添加额外的css.在这种情况下,您可以删除您添加的额外div.

Answer 2

我认为如果你将它包装在 div .row 中，Bootstrap 会自动为你做这个浮动，因为它是基于网格的？

<div class="row">
<div class="pull-left">
    <button type="button" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-chevron-left"></span>
     </button>
 </div>

 <div class="pull-right">
    <button type="button" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </button>
 </div>
 </div>