css 引导面板-页脚,带按钮-右拉

ctehm74n  于 2023-01-14  发布在  其他
关注(0)|答案(4)|浏览(128)

我有下面的HTML元素和 Bootstrap :

<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-footerdiv,以适应按钮高度。
以下是panel-footer的样式:

对于pull-right来说:

有线索吗?
更新:
我在按钮后面加上一句:

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

看起来问题解决了,可以吗?

ldioqlga

ldioqlga1#

原始答案(2017年)

你可以试试这个( Bootstrap 3)

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

你只需要添加text-right类到你的面板页脚。
对我很有效。

更新(2023年1月11日)

引导5

使用类text-end使按钮重新对齐右侧。
x一个一个一个一个x一个一个二个x

Bootstrap 4和3

使用类text-right将使对齐向右。
一个三个三个一个

olhwl3o2

olhwl3o22#

我在jsfiddle中运行了您提供的代码,得到了相同的结果,即使将按钮放在panel-default中,也得到了相同的结果。
这里有一个解决办法。
我创建了一个jsFiddle
它包括两个示例,一个使用带有重写的代码,另一个使用带有css重写的panel 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>
u4vypkhs

u4vypkhs3#

这对我很有效。

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

ut6juiuv4#

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

这将正常工作。

相关问题