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

Question

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

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

这是我想要做的图像的链接，要素文本中的内容应该控制宽度。但是当我按原样制作时，代码总是达到父div的100％。

Answer 1

将div设置为display：inline-block;在css。

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

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

<强> Demo on Bootply