Question

如何将按钮放在同一行中“Nulla vitae quam velit dictum tincidunt.Maecenas ......”？

我正在使用此

style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"

因此线条以面板尺寸结束。没有它，如果文本不够大，按钮和文本就会保持在同一行。

http://jsfiddle.net/Khrys/4PHAE/

<div class="col-md-4">
    <div class="panel panel-default">
        <div class="panel-heading" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
            <span>Nulla vitae quam a velit dictum tincidunt. Maecenas sed dapibus nunc.</span>
            <div class="btn-toolbar pull-right">
                <div class="btn-group">
                    <a href="#" class="btn btn-default btn-xs">?</a>
                    <a href="#" class="btn btn-default btn-xs">!</a>
                </div>
            </div>
        </div>
        <div class="panel-body text-center">
            <p class="lead" style="margin-bottom: 0px;">Description</p>
        </div>
        <div class="panel-footer" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><small>Iten #1, Iten #2, Iten #3, Iten #4, Iten #5, Iten #6, Iten #7, </small></div>
    </div>
</div>

Answer 1

您可以将按钮放在.panel-heading之外，因为它是强制overflow:hidden的元素，然后为您的按钮和文本div提供float或display:inline-block的属性固定宽度。

HTML

<div class="panel panel-default">
    <div class="panel-heading" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
        <span>Nulla vitae quam a velit dictum tincidunt. Maecenas sed dapibus nunc.</span>
    </div>
    <div class="btn-toolbar pull-right">
        <div class="btn-group">
            <a href="#" class="btn btn-default btn-xs">?</a>
            <a href="#" class="btn btn-default btn-xs">!</a>
        </div>
    </div>
</div>

CSS

.panel {
  position:relative;
  width:200px;
}
.panel-heading {
  max-width:150px;
  float:left;
}
.btn-toolbar {
  width:50px;
  float:right;
}

查看此演示 http://jsfiddle.net/6ZpBL/2/

在引导程序面板标题中使用带div和span的省略号

1 个答案: