Jumbotron內部Div元素的控制寬度

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

您可以添加.text-center到父.row，然後從與背景圖像的DIV刪除.col-*類，添加display: inline-block

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="jumbotron"> 
 
    <div class="container"> 
 
    <div class="row text-center"> 
 
     <div style="background-color: rgba(0,0,0,0.5); border-radius: 25px; display: inline-block;"> 
 
     <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 2

你可以那樣做

add text-center在row div

給display: inline-block給你的自定義div。並刪除其他類

希望它會幫助你

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

<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">