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

时间:2014-06-30 22:15:09

标签: css twitter-bootstrap

基本上我正试图在网站的另一侧但在同一行上获得两个按钮。这是它的样子: enter image description here

这是我所拥有的代码:

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

7 个答案:

答案 0 :(得分:14)

将它们分成两个单独的列:

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

答案 1 :(得分:2)

我认为Bootstrap会自动为你浮动,如果你将它包装在div .row中,因为它基于一个网格?

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

答案 2 :(得分:1)

你可以试试HaukurHaf所说的,它会起作用。简单的浮动方法。

或者您也可以将这两个.previous和.next div放在.col-类中,然后将它们包装在行div中。所以它会读到:

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

这样你就可以按照Bootstrap的列布局。

答案 3 :(得分:0)

您需要将包含按钮的div向左和向右浮动。由于您使用的是Bootstrap,我建议您使用内置的.pull-right和.pull-left类。

给前一个div .pull-left类,下一个div为pull-right类。

您可能必须在html源代码中首先使用下一个按钮。

你也可以添加float:left;到你现有的.previous类和float:right;到.next类。

更好的是,只需摆脱前一个/下一个div并将左拉/右拉类直接应用于按钮。

答案 4 :(得分:0)

另一种方法是使用 flexbox:

<div class="flexbuttons">
<button></button>
<button></button>
</div>
    
<style>
.flexbuttons{
  display:flex;
  justify-content: space-between;
}
</style>


答案 5 :(得分:-1)

我会在你的css中使用 float

.previous {
float: left;
}

.next {
float: right;
}

您可以在此处jsfiddle测试此选项。

答案 6 :(得分:-1)

Bootstrap 4答案

以上答案都是Boostrap 3特有的,因此我正在更新接受的答案。

引导程序4中不存在Glyphicons ,因此您必须使用类似Font Awesome

<div class="row">
    <!-- panel-footer -->
    <div class="col-6 text-left">
        <div class="previous">
            <button type="button" class="btn btn-default btn-lg">
                <!--No glyphicons in Bootstrap 4. Insert icon of choice here-->
                <span class=""></span>
            </button>
        </div>
    </div>
    <div class="col-6 text-right">
        <div class="next">
            <button type="button" class="btn btn-default btn-lg">
                <span class=""></span>
            </button>
        </div>
    </div>
</div>