Question

我正在使用Bootstrap，当插入面板页脚的右侧时，按钮组未正确对齐，无法找到我的问题。

我的代码ID：

<div class="container">

        <div class="col-md-6">
            <div class="panel panel-primary">
                <div class="panel-heading"><b>My Title</b><span class="pull-right">123</span></div>
                <div class="panel-body">
                    Just a test text<br>
                </div>
                <div class="panel-footer">
                    Some information herre

                    <div class="btn-group pull-right">
                      <button type="button" class="btn btn-primary dropdown-toggle " data-toggle="dropdown">
                        Group of buttons <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> </li>
                        <li><a href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> PDF</a></li>
                      </ul>
                </div>
            </div>
            </div>
        </div>

    </div><!-- /.container -->

要演示问题，请查看工作代码：

http://jsfiddle.net/69r7s63w/

Answer 1

实际上，最简单，最干净的方法是在页脚中添加clearfix类：

<div class="panel-footer clearfix">

演示：http://jsfiddle.net/r819f85u/

您无需添加任何额外标记即可将其归档。如果您有多个这样的实例，您甚至可以覆盖panel-footer以使其自动生效，但您最好使用Less / Sass / ...版本，否则添加clearfix会很复杂效果。

以下是使用Sass的示例：

// Overriding must be written or imported after Bootstrap
.panel-footer {
  @include clearfix;
}

Answer 2

你需要调整文本的行高度这里有一些信息，因为它不包含在任何div左右。

只需更改

Some information here到<span class="footer-text">Some information here</span>，然后使用以下CSS调整.footer-text类的行高

.footer-text{
   line-height:33px;
}

在这里小提琴：http://jsfiddle.net/rahulrulez/69r7s63w/1/

使用最佳做法更新了解决方案

将HTML更改为：

        <div class="container">
            <div class="col-xs-6 footer-text">Some information herre</div>
        <!-- Single button -->
            <div class="col-xs-6 pull-right">
              <button type="button" class="btn btn-primary dropdown-toggle " data-toggle="dropdown">
                Group of buttons <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> </li>
                <li><a href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a></li>
                <li class="divider"></li>
                <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> PDF</a></li>
              </ul>
            </div>
         </div>

http://jsfiddle.net/rahulrulez/69r7s63w/3/

Answer 3

如果您使用容器，它将更好地适合页脚。

<div class="row">
    <div class="col-xs-6">
        <p>
            Some information herre
        </p>
    </div>
    <div class="col-xs-6">
        <!-- Single button -->
        <div class="btn-group pull-right">
            <button type="button" class="btn btn-primary dropdown-toggle " data-toggle="dropdown">Group of buttons <span class="caret"></span></button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> </li>
                <li><a href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a></li>
                <li class="divider"></li>
                <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> PDF</a></li>
            </ul>
        </div>
    </div>
</div>

Updated fiddle

Answer 4

您还可以将按钮的大小更改为btn-sm or btn-xs。此外，我不完全确定为什么但是让按钮向右浮动会导致它无法在容器内拉伸高度，通常我会看到

<div class="clearfix"></div>

放在浮动元素的末尾，这将拉伸容器。

Bootstrap按钮组在面板的页脚中无法正确显示

4 个答案: