Wie kann ich eine Bootstrap Karussell-Beschriftung über die gesamte Breite des Karussells strecken?

Question

Ich habe ein Karussell, das die volle Breite der Seite hat. Jetzt muss ich die Karussell-Beschriftung die volle Breite der Seite auch mit einem gelben Hintergrund machen. Der Hintergrund sollte die volle Breite der Seite sein, aber der eigentliche Beschriftungstext sollte zentriert sein.

This is what it should look like.

This is what it looks like now.

HTML:

<!--START CAROUSEL--> 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"> 
    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <img src="../../images/LD/desktop_hero1.png" alt="..."> 
     <div class="carousel-caption"> 
     Text for caption 1 here. 
     </div> 
    </div> 
    <div class="item"> 
     <img src="../../images/LD/desktop_hero2.png" alt="..."> 
     <div class="carousel-caption"> 
     Text for caption 2 here. 
     </div> 
    </div> 
    <div class="item"> 
     <img src="../../images/LD/desktop_hero3.png" alt="..."> 
     <div class="carousel-caption"> 
     Text for caption 3 here. 
     </div> 
    </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div>  
<!--END CAROUSEL--> 

CSS:

<style type="text/css"> 
    .carousel-caption { 
    max-width: 100%; 
    width:100%; 
    background-color: #ffb81c; 
    } 
</style> 

Answer 1

carousel-caption Klasse deklariert das Div eine absolute Positionierung mit einer Position von 15% von links.

So können Sie versuchen, das zu überschreiben. Hier ist die CSS:

.carousel-caption { 
    max-width: 100%; 
    width:100%; 
    background-color: #ffb81c; 
    left: 0; 
} 

Answer 2

Sie brauchen nur text-align hinzuzufügen: center becaus tatsächlich die volle Breite nutzt bereits

wenn etwas schwimmt u eine clearfix verwenden können, sie zu lösen, lesen Sie in diesem jsfidlle

title example

<div class="carousel-caption"> 
    <h1> 
    Text for caption 1 here. 
    </h1> 
    </div> 


.carousel-caption h1 { 
max-width: 100%; 
background-color: #ffb81c; 
text-align:center; 
} 

pd. Ich habe das h1-Tag hinzugefügt, um eine bessere semantische Struktur zu haben.