css - Bootstrap 3 - 背景颜色问题

Question

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

例如，我有一个简单的 div，它的类名是“tag”，我给它设置了#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 默认显示为 block 元素。这意味着它将扩展以填充它所在容器的宽度。更改为使用 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;
}