将bootstrap面板宽度设置为文本宽度

Question

我是HTML / Boostrap的新手，所以这可能相当简单 - 如何将a bootstrap panel的面板宽度设置为其文本的长度？

如果面板不可能，是否有类似的引导组件，任何人都知道我可以使用？我所见过的最接近的是labels，但它们太小了。

Answer 1

使Bootstrap面板更加适度

让我们使用Basic panel example。我们必须将display属性设置为inline-block两个类：.panel和.panel-body。

我们可以使用特殊的CSS-class或id来实现。检查结果：

＆＃13;

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

#modest,
#modest .panel-body,
.panel-modest,
.panel-modest .panel-body {
  display: inline-block;
}

＆＃13;

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

<div class="panel panel-default panel-modest">
  <div class="panel-body">
    Modest panel uses class
  </div>
</div>

<div id="modest" class="panel panel-default">
  <div class="panel-body">
    Modest panel uses id
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;