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

Bootstrap: Aligning two buttons on the same row

提问by user3727561

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:

基本上我试图这样做是为了在网站的另一侧但在同一行上获得两个按钮。这是它的样子：

And here's the code for what I have:

这是我所拥有的代码：

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

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

这是“上一个”和“下一个”类的 CSS。

.previous {
text-align: left;
}

.next {
text-align: right;
}

Thanks. I'm using bootstrap if that helps.

谢谢。如果有帮助，我正在使用引导程序。

回答by jme11

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

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.

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

回答by walexnelson

I thought Bootstrap automatically does this floating for you if you wrap it in the div .row since it's based on a grid?

我认为 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>

回答by EdwardM

You can try what HaukurHaf said, it will work. Simple floating method.

你可以试试 HaukurHaf 所说的，它会起作用。简单的浮动方法。

Or you can also put those two .previous and .next divs in .col- classes and then wrap them in a row div. So it would read:

或者你也可以将这两个 .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>

This way your are following Bootstrap's column layout.

这样您就可以遵循 Bootstrap 的列布局。

回答by Kolob Canyon

Bootstrap 4 Answer

引导程序 4 个回答

The above answers are all Boostrap 3 specific, so I'm updating the accepted answer.

以上答案都是针对 Boostrap 3 的，所以我正在更新已接受的答案。

Glyphicons don't exist in Bootstrap 4, so you'll have to use something like Font Awesome

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

回答by HaukurHaf

You need to float the divs containing the buttons to the left and right. Since you are using Bootstrap, I recommend that you use the built in .pull-right and .pull-left classes.

您需要将包含按钮的 div 浮动到左侧和右侧。由于您使用的是 Bootstrap，我建议您使用内置的 .pull-right 和 .pull-left 类。

Give the previous div the .pull-left class and the next div the pull-right class.

给前一个 div .pull-left 类，给下一个 div 拉右类。

You might have to make the next button come first in your html source.

您可能必须将下一个按钮放在 html 源代码中。

You could also just add float:left; to your existing .previous class and float:right; to the .next class.

你也可以只添加 float:left; 到您现有的 .previous 类和 float:right; 到 .next 类。

Better yet, just get rid of those previous/next divs and apply the pull-left/pull-right classes directly to the buttons.

更好的是，只需摆脱那些上一个/下一个 div 并将拉左/拉右类直接应用于按钮。

回答by user3648203

I would use floatin your css

我会在你的 css 中使用float

.previous {
float: left;
}

.next {
float: right;
}

You can test this option here jsfiddle.

您可以在此处jsfiddle测试此选项。