Question

我在一个具有复杂背景图像的jumbotron中有一些文字。为了使文本脱颖而出，我为包含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>

Answer 1

您可以将resources :structures, except: :edit do get '/:doctype' => :edit, on: :edit end添加到父.text-center，然后使用背景图片从div中删除.row类，并添加.col-*

display: inline-block

Answer 2

你可以这样做

在text-center div

中添加row

将display: inline-block提供给您的自定义div。并删除另一个类

希望它会帮助你

＆＃13;

.customdiv {
background-color: rgba(0,0,0,0.5); border-radius: 25px; text-align:center; display:inline-block;
}

＆＃13;

<div class="jumbotron">
    <div class="container">
        <div class="row text-center">
            <div class="customdiv">
                <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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

＆＃13;

控制Jumbotron内部Div元素的宽度

2 个答案: