适合Bootstrap警报的内容

Question

我有一个Bootstrap警报,我希望宽度适合内容.在Bootstrap文档中,默认情况下显示宽度为100%.在所有屏幕尺寸上使警报完全符合其内容的最有效方法是什么？

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

Answer 1

查看问题是否真的不可能将其大小与其内容相匹配？

你只需要添加 display: inline-block

Stack Snippets中的演示:

.alert-trim {
  display: inline-block;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.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>