Question

如果文本（太长），则按钮向下移动。我想：

按钮仍位于右侧，始终位于同一顶层
文本在按钮

这可能吗？

.panel-heading h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
}

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
With short text it works great!
            <button class="btn btn-default pull-right">
                New
            </button>
        </h3>
        <div class="clearfix"></div>
    </div>
    <div class="panel-body">
        Panel content
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
But with long text, the button is lower: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
            <button class="btn btn-default pull-right">
                New
            </button>
        </h3>
        <div class="clearfix"></div>
    </div>
    <div class="panel-body">
        Panel content
    </div>
  </div>

Answer 1

将pull-left添加到您的h3代码中。

<h3 class="panel-title pull-left">

为您的CSS设置width和padding-top。宽度可防止h3内容占据面板的整个宽度（根据您的喜好调整），padding-top将其向下推一点，以便它更符合您的按钮。

.panel-heading h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
    width: 75%;
    padding-top: 8px;
}

将按钮移到h3标记之外。

<h3 class="panel-title pull-left">With short text it works great!</h3>
<button class="btn btn-default pull-right">New</button>

以下是Code Snippet中所有内容的结果。

＆＃13;

.panel-heading h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: normal;
  width: 75%;
  padding-top: 8px;
}

＆＃13;

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title pull-left">
With short text it works great!
            </h3>

    <button class="btn btn-default pull-right">New</button>
    <div class="clearfix"></div>
  </div>
  <div class="panel-body">Panel content</div>
</div>
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title pull-left">
But with long text, the button is lower: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

        </h3>

    <button class="btn btn-default pull-right">New</button>
    <div class="clearfix"></div>
  </div>
  <div class="panel-body">Panel content</div>
</div>

＆＃13;

Bootstrap Panel-Title：标题文本带省略号，右侧有按钮

1 个答案: