将引导程序面板的宽度设置为文本宽度 [英] Set bootstrap panel width to text width

问题描述

我是HTML/Boostrap的新手，所以这也许很简单-如何设置一个引导面板到它的文本长度?

I'm new to HTML/Boostrap so maybe this is fairly easy - How do you set the panel width of a bootstrap panel to the length of it's text?

如果无法使用面板，是否有任何人都知道可以使用的类似引导程序组件?我所看到的最接近的东西是标签，但是它们太小了.

If it isn't possible with a panel, is there a similar bootstrap component that anyone knows of that I can use? The closest thing I've seen are labels, but they are too small.

推荐答案

使Bootstrap面板更适中

让我们使用基本面板示例.对于两个类，我们必须将display属性设置为inline-block:.panel和.panel-body.

Make the Bootstrap panel more modest

Let's use the Basic panel example. We have to set the display property as inline-block for two classes: .panel and .panel-body.

我们可以通过使用特殊的CSS类或id来做到这一点.检查结果:

We can do it by using of special CSS-class or id. Check the result:

@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;
}

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

这篇关于将引导程序面板的宽度设置为文本宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！