rechts: 0 wird nicht mit absoluter Positionierung arbeiten

Question

ich eine Website zu entwickeln Bootstrap 3.3.6

mit Ich habe ein Tutorial folgte eine ansprechende Banner Slider wie dies zum Erstellen von: http://www.jqueryscript.net/slider/Full-Width-Responsive-Carousel-with-jQuery-Bootstrap.html

I‘ Ich möchte Optionen haben, um den Text innerhalb von .carousel-caption entweder rechts oder links des Banners zu positionieren und 50% der verfügbaren Breite zu belegen.

Die Markup ich für die ersten Schlitten habe, ist wie folgt:

<div class="carousel-inner"> 
    <div class="item active"> 
     <div class="fill" style="background-image:url('foo.jpg');"></div> 
     <div class="carousel-caption"> 
      <h3>Hello World</h3>     
      <p>Some more text</p> 
     </div> 
    </div> 
</div> 

Positionierung nach rechts funktioniert nicht die folgende CSS (es auf der linken Seite bleibt). Es ist, als ob right: 0; nicht befolgt wird, obwohl .carousel-caption absolut mit Bootstrap positioniert ist.

.carousel-caption { 
    max-width: 500px; 
    top: 0; 
    right: 0; 
    bottom: auto;  
} 

Ich bin auch klar, dass die max-width zu 500px Einstellung nicht wirklich ideal ist, aber wenn ich 50% versuchte, es scheint die Breite der gesamten Browser-Fenster zu erben?

Answer 1

standardmäßig die Beschriftung hat right:20%; left: 20%, so dass nur das Recht auf 0 Wechsel wird nur das Recht, weiter nach rechts bewegen. Sie müssen sich ändern auf 50% nach links (wenn Sie es wünschen halbe Breite sein):

.carousel-caption { 
    max-width: 500px; 
    top: 0; 
    right: 0; 
    left: 50%; 
    bottom: auto; 
} 

Obwohl, jetzt habe ich bemerkt, dass Sie eine maximale Breite haben so nicht sicher, ob dies von links beginnen würde oder Recht. Um dies zu lösen, müssen Sie die linke abzubrechen und eine Breite von 50% hinzufügen:

.carousel-caption { 
    width: 50%; 
    max-width: 500px; 
    top: 0; 
    right: 0; 
    left: auto; 
    bottom: auto; 
} 

Dadurch sollte es rechts ausgerichtet und 50% Breite bis zu einer maximalen Breite von 500 Pixeln, aber immer auf der Suche platziert rechts