右：<a href="http://www.jqueryscript.net/slider/Full-Width-Responsive-Carousel-with-jQuery-Bootstrap.html" rel="nofollow">http://www.jqueryscript.net/slider/Full-Width-Responsive-Carousel-with-jQuery-Bootstrap.html</a></p> <p>我：0不會有絕對定位

Question

我使用的是引導3.3.6

我已經按照有關創建響應橫幅滑塊這樣的教程開發一個現場工作d喜歡在橫幅的右側或左側選擇放置文本（位於.carousel-caption之內），佔用可用寬度的50％。

的標記我的第一張幻燈片是這樣的：

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

它定位到右邊不會使用下面的CSS（它仍然左側）工作。這好像right: 0;沒有被服從，即使.carousel-caption絕對使用Bootstrap。

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

我也意識到，設置max-width至500像素的不甚理想，但是當我試圖50％，這似乎繼承了整個瀏覽器窗口的寬度是多少？

Answer 1

默認情況下，標題有right:20%; left: 20%，因此只有將右側更改爲0纔會右移更右側。您需要更改留給50％（如果你只希望它是半寬）：

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

雖然，現在我注意到你有一個最大寬度所以不知道這是否會從左邊開始或對。爲了解決這個問題，您需要取消左側，並添加50％的寬度：

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

這應該讓右對齊和50％的寬度可達500像素一個最大寬度，但始終置於right