html - 引导面板标题,如何防止文本换行
问题描述
我有一个引导面板,右侧有标题文本和操作按钮。我总是希望按钮位于面板标题的右上角。
当文本超过一行时,它会换行并替换按钮。我怎样才能防止这种情况?
https://jsfiddle.net/PHPMickB/gsc9zt8k/
我看到了一个类似的问题,但这没有用:
<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 就可以了。请注意,我还将行类添加到面板标题元素以清除浮动(以使元素与文本一起增长)。一个更好的解决方案是简单地添加一个清晰的类而不是添加行并删除边距,但是它可以完美地工作。
.panel-title {
max-width:calc(100% - 120px);
}
推荐阅读
- javascript - Photoshop Script 不再改变颜色
- scala - Spark - 如何在 Spark 中计算百分位数?
- javascript - JavaScript Ajax 不能正常工作
- windows - 阅读 Python 2 或 3 中的标准性能监视器统计信息?
- html - 如何停止弹出不隐藏在css中?
- spotfire - 如何在 Spotfire 中为条形图制作百分比标签
- jwt - 是否所有 JWT 有效负载密钥都被视为声明
- jquery - 数据表使用其他列中的值更改单元格类别
- c# - .Net Core 中的单元测试 JsonResult 匿名类型
- node.js - 异步/等待发布请求 - nodejs