Bootstrap 3圖像不會填充傳送帶，卡在左邊

我一直在試圖讓這個傳送帶工作幾個小時，但我似乎沒有收到所需的結果和文檔getbootstrap.com對於涉及到的任何細微差別都沒什麼特別的（通常你可以複製粘貼他們的代碼並且工作正常）。Bootstrap 3圖像不會填充傳送帶，卡在左邊

基本上，我有從first example here與我的修改默認代碼：

<div class="row"> 

    <div class="col-md-12"> 

     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
      <!-- Indicators --> 
      <ol class="carousel-indicators"> 
       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
       <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
       <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
      </ol> 

      <!-- Wrapper for slides --> 
      <div class="carousel-inner"> 
       <div class="item active"> 
        <img class="center-block" src="assets/img/rate-shop-black.png"> 
        <div class="carousel-caption"> 
         <h3>Rate Shopping Tool</h3> 
         <p>Always get the best rates possible when using our best-in-class rate shopping tool. 
        </div> 
       </div> 
       <div class="item"> 
        <img class="center-block" src="assets/img/rate-shop-black.png"> 
        <div class="carousel-caption"> 
         <h3>Rate Shopping Tool</h3> 
         <p>Always get the best rates possible when using our best-in-class rate shopping tool. 
        </div> 
       </div> 
       <div class="item"> 
        <img class="center-block" src="assets/img/rate-shop-black.png"> 
        <div class="carousel-caption"> 
         <h3>Rate Shopping Tool</h3> 
         <p>Always get the best rates possible when using our best-in-class rate shopping tool. 
        </div> 
       </div> 
      </div> 

      <!-- Controls --> 
      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
      </a> 

      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right"></span> 
      </a> 
     </div> 

    </div> 
</div>

一個我發現Carousel image doesn't fill the width in bootstrap 3提到的IMG標籤設置寬度=「100％」的資源，而且使所述形象爆炸到天文比例。

我發現另一個資源提到使圖像大，所以我進入variables.less，發現@screen-lg寬度被設置爲這樣1200px我回到瘸子和增加了底座畫布大小1200px。這樣看起來更好，但旋轉木馬中的圖像任一側仍然至少有一整英寸在.carousel-control元素的漸變開始之前呈現純白色。

同樣值得注意的是，圖片「貼」在旋轉木馬的左側，除非我將.center-block課程應用於他們，這使我更接近我期望的效果，而不是問題。

我想知道如果我應該再次增加圖像大小，如果是這樣多少？對於整頁（無.container）傳送帶，圖像需要多大？那些包裹在.container的包裹呢？

或者我錯過了導致這種情況發生的標記的一部分？

下面是我目前看到正在製作的圖像。

Shows current result from the above HTML

來源

2014-02-24 DavidScherer

基本上圖像被表現爲它應該。將img標籤的寬度設置爲％100將使圖像伸展至其父項的100％。我假設的是.carousel-內部類。所以有兩個選擇。將.carousel-inner的父寬度設置爲所需的px寬度，然後將img標記設置爲100％，或者繼續調整img標記的大小，直到您滿意爲止。 –

@AlexGrant我很欣賞，但是當我將圖像寬度設置爲100％時，它完全填滿了屏幕（並且我在一個相當大的顯示器上）。你偶然知道我應該使用什麼圖像大小？ – DavidScherer

那麼取決於你的口味。嘗試將父級設置爲max-width：1400px;寬度：100％; 然後將img標籤設置爲寬度：100％; –

這裏是一個的jsfiddle你。

將父滑塊寬度設置爲100％，最大寬度爲1400px;將在滑塊的中心位置並且在大型監視器上時不會變得太大。您可以根據自己的喜好調整最大寬度屬性。

http://jsfiddle.net/4sBED/1/

#carousel-example-generic { 
    width: 100%; 
    max-width: 1400px; 
    margin: 0 auto; 
}

來源

2014-02-24 19:13:43

Bootstrap 3圖像不會填充傳送帶，卡在左邊

回答

相關問題