Bootstrap調整大小的網頁圖像超出列

我在我的網頁上有三列。中間欄內有兩張圖片。這一切都是通過bootstrap完成的，當我調整頁面大小（使其變小）時，圖像會出現在中間欄外。只有當圖像觸及網絡瀏覽器的邊緣時，圖像纔會調整大小或重新定位。有誰知道它爲什麼這樣做？這是一個asp.net web表單網站。母版頁已經有3列全部設置和工作，我只是將圖像放在中間欄中的競爭佔位符內。Bootstrap調整大小的網頁圖像超出列

這是我放入圖像的代碼部分。

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> 

    <div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-7"> 
      <div id="myCarousel" class="carousel slide"> 
       <ol class="carousel-indicators"> 
        <li data-target="myCarousel" data-slide-to="0" class="active"></li> 
        <li data-target="myCarousel" data-slide-to="1"></li> 
        <li data-target="myCarousel" data-slide-to="2"></li> 
       </ol> 
       <div class="carousel-inner"> 
        <div class="item active"> 
         <img src="images/Ad1.jpg" class="img-responsive" /> 
        </div> 
       </div> 
      </div> 

     </div> 
     <div class="col-xs-6 col-md-5"> 
      <div id="adRotator" class="carousel slide"> 
       <div class="carousel-inner"> 
        <div class="item active"> 
         <img src="images/Ad2.jpg" class="img-responsive" /> 
         <div class="container"> 
          <div class="carousel-caption"> 
           <h1>Ad rotator</h1> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

來源

2013-11-02 nanobots

如果可以幫助我們，如果你有一個jsfiddle。 – AbdelElrafa

請說明您的預期行爲以及您獲得的實際行爲。一個jsfiddle以及請。 –

別擔心，我的一個朋友幫我修好了，謝謝 – nanobots

在CSS圖像的寬度設置爲100％，有助於在這種情況下。在你的具體例子中，它可以通過以下方式解決：

.item img { 
    width: 100%; 
}

來源

2014-09-27 01:40:36 Raiyan

Bootstrap調整大小的網頁圖像超出列

回答

相關問題