Bootstrap 3 div自动宽度不是父div的100％答案

【问题标题】：Bootstrap 3 div auto width not 100% of parent divBootstrap 3 div自动宽度不是父div的100％
【发布时间】：2013-11-19 17:42:48
【问题描述】：

我想制作一个 div 用于在一个小框中显示内容。我希望 div 是自动宽度，但它总是 100% 的父 div，是不是 div 可能不是最好的方式？

<div class="rental-feature">
    <span class="feature-icon door"></span>
    <span class="feature-text">2222222</span>
</div>

这是我正在尝试做的图像的链接，特色文本中的内容应控制宽度。但是当我按原样制作时，代码总是转到父 div 的 100%。

【问题讨论】：

请提供一个演示，例如 bootply.com 或 jsfiddle.net 以及您的 css 和 html。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

设置 div 为 display:inline-block;在 CSS 中。

然后它应该获取内容的宽度，而不是填写父项。

【讨论】：

【解决方案2】：

将display:inline-block; 用于您的.feature-text 课程应该可以解决您的问题。

您还可以使用带有一点自定义 CSS 的 Bootstrap .btn-group 来获得类似的结果：

<div class="rental-feature btn-group">
  <span class="feature-icon btn btn-default"><i class="icon-food"></i></span>
  <span class="feature-text btn btn-default">Food</span>
</div>
<div class="rental-feature btn-group">
  <span class="feature-icon btn btn-default"><i class="icon-glass"></i></span>
  <span class="feature-text btn btn-default">Glass</span>
</div>

.feature-icon,
.feature-icon:hover,
.feature-icon:focus {
  cursor: default;
  background: #ddd;
  border-color: #ccc;
}
.feature-text,
.feature-text:hover,
.feature-text:focus {
  cursor: default;
  background: white;
  border-color: #ccc;
}

Demo on Bootply

【讨论】：