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

顺便说一句，你可以使用内置的辅助类文本的左/文本右像我在列的div这样做你不需要添加额外的CSS。在这种情况下，您可以删除已添加的额外div。

Answer 2

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

为先前的div赋予.pull-left类，下一个div赋予右拉类。

你可能需要在你的html源代码中先找到下一个按钮。

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

更好的是，只要摆脱那些先前/下一个divs并将左/右拉类直接应用到按钮。

Answer 3

我会用浮动在你的CSS

.previous { 
float: left; 
} 

.next { 
float: right; 
} 

您可以测试在这里jsfiddle此选项。

Answer 4

我以为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> 

Answer 5

你可以试试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> 

这样你跟随引导的列布局。