Bootstrap 3 div自适应宽度不是父div的100%

Question

我想创建一个小盒子来展示内容，希望这个盒子的宽度可以自适应。但是现在这个div的宽度总是和父级div一样宽，难道使用div不是最好的方式吗？

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

这里是我想要实现的效果图片链接，特性文本中的内容应该控制宽度。但当我按原样编写时，代码总是占父级 div 的 100%。

- user3007115

---

请提供一个演示，例如bootply.com或jsfiddle.net，其中包含您的CSS和HTML。 - Ravimallya

Answer 1

在CSS中将div设置为display:inline-block;，它应该会根据内容获取宽度，而不是填充父级元素。

- Rasmus Stougaard

Answer 2

使用display:inline-block;为您的.feature-text类应该可以解决您的问题。

您还可以使用Bootstrap的.btn-group并添加一些自定义CSS来获得类似的效果：

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

在 Bootply 上的演示

- zessx