css - 适合 Bootstrap 警报的内容

标签 css twitter-bootstrap

<分区>

我有一个 Bootstrap 警报,我希望宽度适合内容。在 Bootstrap 文档中,默认值为 100% 宽度。使警报内容完全适合所有屏幕尺寸的最可靠方法是什么?

<div class="container">
    <div class="alert alert-danger">
        My short alert message.
    </div>
</div>

最佳答案

你只需要添加display: inline-block

堆栈片段中的演示:

.alert-trim {
  display: inline-block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css">

<div class="container">
  <div class="alert alert-danger">
    Normal Alert Message
  </div>

  <div class="alert alert-danger alert-trim">
    Trimmed Alert Message
  </div>
</div>

另请参阅:Is it really impossible to make a div fit its size to its content?

关于css - 适合 Bootstrap 警报的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31342606/

相关文章:

javascript - Jquery 搜索所有具有特殊类别的标签,如果其中一个标签的值只显示一个警报

twitter-bootstrap - 如何使用 twitter bootstrap 向链接添加图标

css - 带 overflow-y 滚动的 div 的 Bootstrap 导致网站的水平滚动

html - 固定导航栏分解并覆盖内容

html - Doctype 忽略了百分比

javascript - 是否有可能让 child 超出 parent 的溢出限制?

html - 使用 CSS 最大高度过渡向上/向下滑动?

html - 可以使用图像热点吗?这是当今世界最好的方法吗?

javascript - Bootstrap 轮播不工作 : stack images (using rails)

jquery - CSS 图像替换的最佳现代方法