带按钮向右拉的引导面板页脚答案

【问题标题】：Bootstrap panel-footer with button pull-right带按钮向右拉的引导面板页脚
【发布时间】：2019-05-29 16:54:03
【问题描述】：

我有以下带有引导程序的 HTML 元素：

 <div class="panel-footer">
                            <button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
                        </div>

如果您看到有灰色区域 (panel-footer)：

按钮使用pull-right 类也就是float:right，但我希望灰色区域实际上是panel-footer div 适合按钮高度。

这是panel-footer的样式：

这是pull-right：

有什么线索吗？

更新：

我在按钮后添加：

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

似乎解决了这个问题。可以吗？

【问题讨论】：

您好，您可以为您的实际代码发布一个网址吗？我在这里用 bootstrap 和你的 html 创建了一个 codepen，它工作正常：codepen.io/anon/pen/dONeqV

标签： css twitter-bootstrap-3

【解决方案1】：

你可以试试这个。

<div class="panel-footer text-right">
   <button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>

您只需将 text-right 类添加到您的面板页脚。

它对我有用。

【讨论】：

【解决方案2】：

我运行了您在 jsFiddle 中提供的代码并得到了相同的结果。即使将按钮放在面板 panel-default 中，仍然得到相同的结果。

这是一个修复。

我创建了一个jsFiddle

它包括两个示例，一个使用带有覆盖的代码，另一个使用带有 css 覆盖的面板 panel-default 和 panel-body。

希望有帮助。

.panel-footer {
  height: 50px !important;
}

#sep {
  margin-top: 10px;
}

.panel-body {
  background: #f3f3f3 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="panel-footer">
  <button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>
<div id="sep"></div>
<div class="panel panel-default">
  <div class="panel-body">
    <button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
  </div>

【讨论】：

【解决方案3】：

这对我有用。

<div class="footer">
        <a href="#" id="btnSave" class="pull-right btn btn-primary">Save</a>
</div>

【讨论】：

【解决方案4】：

<div class="panel-footer">
     <div class="form-group text-right">
         <button type="submit" class="btn btn-primary">Submit</button>
     </div>
 </div>

这将正常工作。

【讨论】：