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

基本上我正在尝试这样做,以获得在网站的另一侧但在同一行上的两个按钮.这是它的样子：

以下是我所拥有的代码：

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

解决方法

将它们包装在两个单独的列中,如下所示：

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

原文地址：https://www.jb51.cc/css/215415.html