Kontrollbreite der Div-Elemente im Inneren Jumbotron

Question

Ich habe etwas Text in einem Jumbotron, der ein komplexes Hintergrundbild hat. Um den Text hervorzuheben, habe ich dem enthaltenen div eine Hintergrundfarbe hinzugefügt, um es lesbarer zu machen. Die div-Breite hat jedoch dieselbe Größe wie die Spalten. Gibt es eine Möglichkeit, die Breite so einzustellen, dass das div die gleiche Breite wie der Text hat? Ich möchte keinen zusätzlichen Abstand zu beiden Seiten des zentrierten Textes.

<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

Sie .text-center dem Mutter hinzufügen können .row, entfernen Sie die .col-* Klassen aus dem div mit dem Hintergrundbild und fügen 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

Sie es so tun können,

hinzufügen text-center in row div

geben Sie display: inline-block zu Ihrem benutzerdefinierten div. und entfernen Sie eine andere Klasse

hoffen, dass es hilft Ihnen,

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