Html Jumbotron内Div元素的控制宽度

我在一个有复杂背景图像的巨型机器里有一些文字。为了突出文本，我在包含的div中添加了背景色，以使其更具可读性。但是，div宽度与列的大小相同。有没有办法设置宽度，使div与文本的宽度相同？我不希望在居中文本的两侧都有额外的空间

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 col-lg-push-1 text-center" style="background-color: rgba(0,0,0,0.5); border-radius: 25px;">
                <h1>Some text, more text,<br>and more text</h1>
                <p><a href="" class="btn btn-primary btn-lg">Learn more <i class="fa fa-angle-double-right"></i></a></p>
            </div>
        </div>
    </div>
</div>

一些文本，更多文本，
和更多文本

您可以将

.text center

添加到父

.row

，然后从具有背景图像的div中删除

.col-*

类，并添加

显示：内联块

一些文本，更多文本，
和更多文本

您可以将

.text center

添加到父

.row

，然后从具有背景图像的div中删除

.col-*

类，并添加

显示：内联块

一些文本，更多文本，
和更多文本

你可以这样做

在

行中添加
文本中心

将
display:inline block
提供给自定义div.，并删除其他类

希望对你有帮助


.customdiv{
背景颜色：rgba（0,0,0,0.5）；边框半径：25px；文本对齐：中心；显示：内联块；
}

一些文本，更多文本，
和更多文本

你可以这样做

在
行中添加
文本中心

将
display:inline block
提供给自定义div.，并删除其他类

希望对你有帮助


.customdiv{
背景颜色：rgba（0,0,0,0.5）；边框半径：25px；文本对齐：中心；显示：内联块；
}

一些文本，更多文本，
和更多文本