基本上我正试图在网站的另一侧但在同一行上获得两个按钮。这是它的样子:
这是我所拥有的代码:
<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。
答案 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)
答案 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>