我有以下HTML元素与bootstrap:
<div class="panel-footer">
<button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>
该按钮使用pull-right
类也是float:right
,但我希望灰色区域实际上是panel-footer
div
以适应按钮高度。
这是panel-footer
的样式:
这对于pull-right
:
任何线索?
更新:
我在按钮后面添加了:
<div class="clearfix"></div>
似乎解决了这个问题。这可以吗?
你可以试试这个。
<div class="panel-footer text-right">
<button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>
您只需要在面板页脚中添加文本右侧类。
这个对我有用。
这对我有用。
<div class="footer">
<a href="#" id="btnSave" class="pull-right btn btn-primary">Save</a>
</div>
我运行了你在jsFiddle中提供的代码并获得了相同的结果。即使将按钮放在面板 - 默认情况下,仍然会得到相同的结果。
这是一个修复。
我创造了一个jsFiddle
它包括两个示例,一个使用带有覆盖的代码,另一个使用面板面板 - 默认面板和带有css覆盖的面板体。
希望有所帮助。
.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>
<div class="panel-footer">
<div class="form-group text-right">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
这将正常工作。