我有一个 Bootstrap 面板,右侧有标题文本和操作按钮。我总是希望按钮位于面板标题的右上角。
当文本超过一行时,它会换行并替换按钮。我怎样才能避免这种情况?
https://jsfiddle.net/PHPMickB/gsc9zt8k/
我看到了一个类似的问题,但这没有用:
Not to make bootstrap panel header components wrap
<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-lg-offset-2">
<h1>Title</h1>
<div class="panel-group">
<div class="panel panel-warning">
<div class="panel-heading skinny">
<h4 class="panel-title pull-left">
<span data-toggle="collapse" href="#collapse45">Tenetur tenetur temporibus tempora ipsam. Tenetur tenetur temporibus tempora ipsam.Tenetur tenetur temporibus tempora ipsam.
</span>
</h4>
<div class="input-group">
<div class="input-group-btn text-right">
<button onclick="btnSnoozeClick('1onDgk')" class="btn btn-warning"><i
class="glyphicon glyphicon-time"></i></button>
<button onclick="btnCompleteClick('1onDgk')" class="btn btn-warning"><i
class="glyphicon glyphicon-ok"></i></button>
<button onclick="btnDeleteClick('1onDgk')" class="btn btn-warning"><i
class="glyphicon glyphicon-trash"></i></button>
</div>
</div>
</div>
<div id="collapse45" class="panel-collapse collapse">
<div class="panel-body">
Sed vel natus ut voluptas et.
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading skinny">
<h4 class="panel-title pull-left">
<span data-toggle="collapse" href="#collapse45">Tenetur tenetur te
</span>
</h4>
<div class="input-group">
<div class="input-group-btn text-right">
<button onclick="btnSnoozeClick('1onDgk')" class="btn btn-success"><i
class="glyphicon glyphicon-time"></i></button>
<button onclick="btnCompleteClick('1onDgk')" class="btn btn-success"><i
class="glyphicon glyphicon-ok"></i></button>
<button onclick="btnDeleteClick('1onDgk')" class="btn btn-success"><i
class="glyphicon glyphicon-trash"></i></button>
</div>
</div>
</div>
<div id="collapse45" class="panel-collapse collapse">
<div class="panel-body">
Sed vel natus ut voluptas et.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
谢谢,
米克
最佳答案
为标题应用最大宽度。如果按钮的大小和数量总是固定的,calc 就可以工作。请注意,我还将行类添加到面板标题元素以清除 float (以使用文本增大元素)。更好的解决方案是简单地添加一个清晰的类,而不是添加行并删除边距,但它以这种方式完美地工作。
.panel-title {
max-width:calc(100% - 120px);
}
关于html - Bootstrap 面板标题,如何防止文本换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52493340/