适合Bootstrap警报的内容

Question

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

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

Answer 1

查看问题Is it really impossible to make a div fit its size to its content?

您只需添加display: inline-block

即可

Stack Snippets中的演示：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;