基本上,我试图做的是在网站的另一侧但在同一行上获得两个按钮。这是它的样子:
这是我所拥有的代码:
<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 -->
这是类“previous”和“next”的 CSS。
.previous {
text-align: left;
}
.next {
text-align: right;
}
谢谢。如果有帮助,我正在使用 Bootstrap 。
最佳答案
像这样将它们包装在两个单独的列中:
<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 -->
顺便说一句,您可以像我在列 divs 上所做的那样使用内置的辅助类 text-left/text-right,这样您就不需要添加额外的 css。在这种情况下,您可以删除已添加的额外 div。
关于css - Bootstrap : Aligning two buttons on the same row,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24499767/