我正在使用 Bootstrap 3,我想在右上角的面板标题中添加一些按钮。尝试添加它们时,它们显示在标题基线下方。
我应该在标题、面板标题或按钮中添加哪些缺失的 CSS?
我正在使用 Bootstrap 3,我想在右上角的面板标题中添加一些按钮。尝试添加它们时,它们显示在标题基线下方。
我应该在标题、面板标题或按钮中添加哪些缺失的 CSS?
我将首先将clearfix
类添加到<div>
withpanel-heading
类。然后,将panel-title
和都添加pull-left
到H4
标签中。然后,padding-top
根据需要添加 。
这是完整的代码:
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4>
<div class="btn-group pull-right">
<a href="#" class="btn btn-default btn-sm">## Lock</a>
<a href="#" class="btn btn-default btn-sm">## Delete</a>
<a href="#" class="btn btn-default btn-sm">## Move</a>
</div>
</div>
...
</div>
我在这里玩游戏有点晚了,但简单的答案是在按钮 div 之后移动 H4。这是浮动时的常见问题,请始终在其余内容之前定义您的浮动,否则您将遇到额外的换行问题。
<div class="panel-heading">
<div class="btn-group pull-right">
<a href="#" class="btn btn-default btn-sm">## Lock</a>
<a href="#" class="btn btn-default btn-sm">## Delete</a>
<a href="#" class="btn btn-default btn-sm">## Move</a>
</div>
<h4>Panel header</h4>
</div>
这里的问题是,当您的浮动是在其他项目之后定义时,浮动的顶部将从紧接在它之前的元素的最后一行位置开始。因此,如果前一项换行到第 3 行,您的浮动也将从第 3 行开始。
将浮动移动到列表的顶部消除了该问题,因为没有先前的元素将其向下推,浮动之后的任何内容都将呈现在顶行(假设所有项目都有空间)
正确和错误排序的示例和效果: http: //www.bootply.com/HkDlNIKv9g
您应该应用“clearfix”来清除父元素。接下来,标题标题的 h4 一直延伸到标题中,因此在应用 clearfix 后,它将下推子元素,导致标题 div 具有更大的高度。
这是一个修复,只需将其替换为您的代码即可。
<div class="panel-heading clearfix">
<b>Panel header</b>
<div class="btn-group pull-right">
<a href="#" class="btn btn-default btn-sm">## Lock</a>
<a href="#" class="btn btn-default btn-sm">## Delete</a>
<a href="#" class="btn btn-default btn-sm">## Move</a>
</div>
</div>
于 2015 年 12 月 22 日编辑 - 将 .clearfix 添加到标题 div
我将按钮组放在标题内,然后在底部添加了一个 clearfix。
<div class="panel-heading">
<h4 class="panel-title">
Panel header
<div class="btn-group pull-right">
<a href="#" class="btn btn-default btn-sm">## Lock</a>
<a href="#" class="btn btn-default btn-sm">## Delete</a>
<a href="#" class="btn btn-default btn-sm">## Move</a>
</div>
</h4>
<div class="clearfix"></div>
</div>
试着把btn-group
里面H4
这样..
<div class="panel-heading">
<h4>Panel header
<span class="btn-group pull-right">
<a href="#" class="btn btn-default btn-sm">## Lock</a>
<a href="#" class="btn btn-default btn-sm">## Delete</a>
<a href="#" class="btn btn-default btn-sm">## Move</a>
</span>
</h4>
</div>
你是对的。看起来不错,<b>title</b>
但我想使用<h4>
.
我已经把<h4 style="display: inline;">
它接缝工作了。
现在,我只需要添加一些垂直对齐。
在这种情况下,您应该.clearfix
在容器末尾添加浮动元素。
<div class="panel-heading">
<h4>Panel header</h4>
<div class="btn-group pull-right">
<a href="#" class="btn btn-default btn-sm">## Lock</a>
<a href="#" class="btn btn-default btn-sm">## Delete</a>
<a href="#" class="btn btn-default btn-sm">## Move</a>
</div>
<span class="clearfix"></span>
</div>
我发现在 .panel-heading 上使用附加类会有所帮助。
<div class="panel-heading contains-buttons">
<h3 class="panel-title">Panel Title</h3>
<a class="btn btn-sm btn-success pull-right" href="something.html"><i class="fa fa-plus"></i> Create</a>
</div>
然后使用这个更少的代码:
.panel-heading.contains-buttons {
.clearfix;
.panel-title {
.pull-left;
padding-top:5px;
}
.btn {
.pull-right;
}
}
元素显示h4
为块。给它添加一个边框,你会看到发生了什么。如果你想在它的右边浮动一些东西,你有很多选择:
在任何一种情况下,您都应该将clearfix
类添加到容器元素中以获得正确的按钮填充。
您可能还希望将panel-title
类添加到 h4 元素或调整其填充。
或这个?通过使用行类
<div class="row">
<div class=" col-lg-2 col-md-2 col-sm-2 col-xs-2">
<h4>Panel header</h4>
</div>
<div class=" col-lg-10 col-md-10 col-sm-10 col-xs-10 ">
<div class="btn-group pull-right">
<a href="#" class="btn btn-default btn-sm">## Lock</a>
<a href="#" class="btn btn-default btn-sm">## Delete</a>
<a href="#" class="btn btn-default btn-sm">## Move</a>
</div>
</div>
</div>
</div>