CSS Bootstrap 3 面板标题，按钮位置错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18963881/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 panel header with buttons wrong position
提问by Dede
I am using Bootstrap 3 and I would like to add some buttons in panel header, on top-right corner. When trying to add them, they are show below title baseline.
我正在使用 Bootstrap 3，我想在右上角的面板标题中添加一些按钮。尝试添加它们时，它们显示在标题基线下方。
Code : http://bootply.com/82631
What are the missing CSS I should add either to the title, panel heading, or buttons ?
我应该在标题、面板标题或按钮中添加哪些缺少的 CSS？
回答by OregonJeff
I would start by adding clearfixclass to the <div>with panel-headingclass. Then, add both panel-titleand pull-leftto the H4tag. Then, add padding-top, as necessary.
我首先将clearfix类添加到<div>withpanel-heading类。然后，将panel-title和添加pull-left到H4标签中。然后，padding-top根据需要添加。
Here's the complete code:
这是完整的代码：
<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>
回答by getsaf
I'm a little late to the game here, but the simple answer is to move the H4 AFTER the button div. This is a common issue when floating, always have your floats defined BEFORE the rest of the contents or you'll have that extra line-break problem.
我在这里玩游戏有点晚了，但简单的答案是在按钮 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>
The issue here is that when your floats are defined after other items, the float's top will start at the last line-position of the element immediately before it. So, if the previous item wraps to line 3, your float will start at line 3 too.
这里的问题是，当您的浮动是在其他项目之后定义时，浮动的顶部将从元素的最后一行位置开始。因此，如果前一项换行到第 3 行，则您的浮动也会从第 3 行开始。
Moving the float to the TOP of the list eliminates the issue because there are no previous elements to push it down and anything after the float will be rendered at the top line (assuming there is room on the line for all items)
将浮动移动到列表的顶部消除了这个问题，因为没有先前的元素将其向下推，浮动之后的任何内容都将在顶行呈现（假设所有项目都在该行上有空间）
Example of correct and incorrect ordering and the effects: http://www.bootply.com/HkDlNIKv9g
正确和不正确的排序和效果示例：http: //www.bootply.com/HkDlNIKv9g
回答by andre3wap
You should apply a "clearfix" to clear the parent element. Next thing, the h4 for the header title, extend all the way across the header, so after you apply clearfix, it will push down the child element causing the header div to have a larger height.
您应该应用“clearfix”来清除父元素。接下来，标题标题的 h4 一直延伸到标题，因此在应用 clearfix 后，它将向下推子元素，导致标题 div 具有更大的高度。
Here is a fix, just replace it with your code.
这是一个修复程序，只需将其替换为您的代码即可。
<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>
Editted on 12/22/2015 - added .clearfix to heading div
2015 年 12 月 22 日编辑 - 将 .clearfix 添加到标题 div
回答by Jonathan
I placed the button group inside the title, and then added a clearfix to the bottom.
我将按钮组放在标题内，然后在底部添加了一个清除修复。
<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>
回答by Zim
Try putting the btn-groupinside the H4like this..
试着把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>
回答by Dede
You are part right. with <b>title</b>it looks fine, but I would like to use <h4>.
你是对的。与<b>title</b>它看起来很好，但我想用<h4>。
I have put <h4 style="display: inline;">and it seams to work.
我已经把<h4 style="display: inline;">它接缝工作。
Now, I only need to add some vertival align.
现在，我只需要添加一些垂直对齐。
回答by sargonpiraev
In this case you should add .clearfixat the end of container with floated elements.
在这种情况下，您应该.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>
回答by Jon Joyce
I've found using an additional class on the .panel-heading helps.
我发现在 .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>
And then using this less code:
然后使用这个更少的代码：
.panel-heading.contains-buttons {
.clearfix;
.panel-title {
.pull-left;
padding-top:5px;
}
.btn {
.pull-right;
}
}
回答by Kanit P.
or this? By using row class
或这个？通过使用行类
<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>
回答by mrdeus
The h4element is displayed as a block. Add a border to it and you'll see what's going on. If you want to float something to the right of it, you have a number of options:
所述h4元件被显示为块。给它添加一个边框，你就会看到发生了什么。如果你想在它的右边浮动一些东西，你有很多选择：
- Place the floated items beforethe block (h4) element.
- Float the h4 element as well.
- Display the h4 element inline.
- 放置浮动项之前的块（H4）元件。
- 也浮动 h4 元素。
- 内联显示 h4 元素。
In either case, you should add the clearfixclass to the container element to get correct padding for your buttons.
在任何一种情况下，您都应该将clearfix类添加到容器元素以获得正确的按钮填充。
You may also want to add the panel-titleclass to, or adjust the padding on, the h4 element.
您可能还想将panel-title类添加到 h4 元素或调整 h4 元素的内边距。
