引导：对齐同一行上的两个按钮 [英] Bootstrap: Aligning two buttons on the same row

问题描述

基本上，我试图做到这一点，两个按钮在网站的对面，但在同一行。以下是它的样子：

Basically what I'm attempting to do it to get two buttons on the opposite side of the website but on the same row. Here's what it looks like:

这里是我有的代码：

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

And here's the CSS for the classes 'previous' and 'next'.

.previous {
text-align: left;
}

.next {
text-align: right;
}

谢谢。

推荐答案

将它们分成两个独立的列，如下所示：

Wrap them in two separate columns like this:

<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 /在列上做div，所以你不需要添加额外的css。在这种情况下，您可以移除您添加的额外div。

By the way, you can use the built in helper classes text-left / text-right like I've done on the column divs so you don't need to add the extra css. In that case you can remove the extra divs you've added.

这篇关于引导：对齐同一行上的两个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！