Question

基本上我正试图在网站的另一侧但在同一行上获得两个按钮。这是它的样子： 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。

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

我认为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 3

你可以试试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的列布局。

Answer 4

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

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

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

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

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

Answer 5

另一种方法是使用 flexbox：

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

Answer 6

我会在你的css中使用 float

.previous {
float: left;
}

.next {
float: right;
}

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

Answer 7

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>

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

7 个答案: