css - Bootstrap : Aligning two buttons on the same row

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

这是类“previous”和“next”的 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 -->

顺便说一句，您可以像我在列 divs 上所做的那样使用内置的辅助类 text-left/text-right，这样您就不需要添加额外的 css。在这种情况下，您可以删除已添加的额外 div。