Bootstrap 3 - 背景颜色问题

Question

我正在使用Bootstrap 3框架开发一个网站，并且在将背景颜色应用于某些页面元素时遇到了问题。

例如，我有一个带有类名“tag”的简单div，我给出了#ececec的背景颜色和5px 10px 5px 10px的填充。在div中我只是一小段文字，例如“lorem ipsum”。通常这样的结果是文本具有浅灰色背景，并且文本上方和下方为5px，左侧和右侧为10px。由于某种原因，背景颜色会延伸到父div的整个宽度。我不想为div设置一个特定的宽度，因为它应该收缩和扩展，具体取决于文本的长度。请参阅下面的示例代码。

.tag {
    background-color: #ececec;
    margin-bottom: 2px;
    padding: 5px 10px 5px 10px; 
}

<div class="tag">Lorem Ipsum</div>

Answer 1

默认情况下，

div显示为块元素。这意味着它将展开以填充其所在容器的宽度。更改为使用span元素：

<span class="tag">Lorem Ipsum</span>

或者更改CSS以将display属性修改为inline或inline-block：

.tag {
    background-color: #ececec;
    margin-bottom: 2px;
    padding: 5px 10px 5px 10px; 
    display: inline;
}

Answer 2

.tag {
  background-color: #ececec;
  margin-bottom: 2px;
  padding: 5px 10px 5px 10px; 
  display:inline-block;
}