Bootstrap 3 - 背景颜色问题

Question

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

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

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

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

Answer 1

divs 默认显示为块元素。这意味着它将扩展以填充其所在容器的宽度。改为使用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;
}