5

我在面板标题中有一个按钮组。我希望它们向右浮动，但是当我这样做时，按钮现在位于标题的底部，我需要它们居中。我该怎么做呢？

这是HTML：

<div class="panel panel-default">
    <div class="panel-heading">
        Member of the following Units
        <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
            <button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button>
        </div>
    </div>
    <div class="panel-body">
        test
    </div>
    <div class="panel-footer">
        test
    </div>      
</div>

和一个小提琴的例子：http: //jsfiddle.net/snowburnt/4ejuK/

奇怪的是，在我在 chromium 上的 linux 开发环境中，按钮本身正确居中，但其中的图标低于应有的位置，我觉得这将解决这两个问题。

4

7 回答 7

18

  1. 您应该将该类添加pull-right到您的 .btn-group div 中，而不是指定 float:right。

  2. 当您浮动一个元素时，它会丢失块布局。由于没有高度，它将不再“向下推”其容器的底部。overflow:hidden您可以通过设置来解决此问题，.panel-heading以允许它正确调整大小。您必须将顶部填充添加到.panel-heading和负顶部填充到.btn-group以适应高度.btn-group.

我叉了你的小提琴：http: //jsfiddle.net/Dq5ge/

于 2013-10-30T19:19:09.670 回答
3

你必须清除你的花车。有很多方法可以解决这个问题，比如 clearfix hack 或使用 overflow: hidden。这就是我在你的小提琴中所做的。http://jsfiddle.net/4ejuK/2/

.panel-heading {
    overflow: hidden;
}

如果不清除浮动的子元素，父元素将崩溃，从而导致许多意想不到的布局问题。

于 2013-10-30T19:11:22.953 回答
1

添加

.container{
 line-height:2.2;
}

以及大卫上面建议的将文本真正放在垂直中心的内容。检查小提琴

于 2013-10-30T19:16:19.457 回答
1

我将 2 个最佳解决方案合二为一，以便在不改变太多尺寸或使用顶部负索引的情况下更适合：

.panel-heading {
    overflow: hidden;
}

并使用：

<div class="pull-right">

这里是示例：Jsfiddle 示例

于 2014-11-16T20:20:04.300 回答
0

您可以为此使用技巧；）

    ...
    Member of the following Units
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
        <button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button>
    </div>
    <div class="btn btn-primary btn-sm" style="opacity:0.001">I am hidden</div>
    ...

祝你好运 - SM 穆萨维

于 2014-04-24T08:38:42.157 回答
0

我今天为自己解决了这个问题。我发现的所有 看似可行的建议都涉及以像素为单位设置事物的高度以匹配按钮，而这并不适合我。我希望垂直对齐独立于面板文本本身的实际高度。

如果您查看@ithcy的答案，然后顶起font-size，您就会遇到问题（演示）。

我用谷歌搜索得越多，我就越相信 CSSvertical-align是我想要的，但它似乎从来没有做我认为它应该做的事情。然后我看到了 Louis Lazaris 的一篇文章，它更好地解释了什么vertical-align是，

该vertical-align属性可以分为三个易于理解的步骤：

  1. 它仅适用于inlineorinline-block元素
  2. 它影响元素本身的对齐方式，而不是其内容（应用于表格单元格时除外）
  3. 当它应用于表格单元格时，对齐会影响单元格内​​容，而不是单元格本身

更重要的是不是：

常见的误解vertical-align是，当它应用于一个元素时，它会使该元素内的所有元素改变它们的垂直位置。

我的解决方案是使用 CSS 表格格式（vertical-align毕竟这就是它的用途）而不是floatBootstrap 提供的 spull-left和pull-right. 我（天真地）这样做需要一些额外的标记，但我得到了我想要的结果：

HTML

<div class="panel-heading table-style">
  <span class="panel-title">Member of...</span>
  <div class="button-wrap">
    <div class="btn-group btn-group-sm">
      <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
      <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove-circle"></span></button>
    </div>
  </div>
</div>

CSS

.panel-heading.table-style {
  display: table;
  width: 100%;
}
.panel-heading.table-style .panel-title {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}
.panel-heading.table-style .button-wrap {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}

我做了一个演示我使用它的方式，我确信可以改进。

我很清楚，btn-group有一种倾向用这种方法包装，这看起来很糟糕。我只是没有知识或经验来解决它。在我的用例中，我只需要单个按钮，而不是组，所以它对我来说已经足够好了。

于 2014-10-28T04:36:16.307 回答
0

已经很晚了，但我只是通过这个 css 解决：

.panel-heading h3,
.panel-heading .btn-group
{
  display:inline-block;
}
于 2015-10-28T16:04:06.363 回答