Twitter Bootstrap輪播響應不正常

好吧我有一個非常簡單的問題，我不認爲會需要很多示例。基本上我有一個帶有1500px x 550px圖像的Bootstrap Carousel，它的設置佔用了屏幕寬度的100％。當我最小化屏幕時，圖像的高度保持不變，而寬度減小使圖像變形它被擠在一起。這是我簡單的旋轉木馬：Twitter Bootstrap輪播響應不正常

<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> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
    <div class="active item">…</div> 
    <div class="item">…</div> 
    <div class="item">…</div> 
    </div> 
    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div>

，這裏是STHE CSS樣式我有它

.carousel { 
     margin-bottom: 60px; 
     margin-top:-16px; 
    } 

    .carousel .container { 
     position: relative; 
     z-index: 9; 
    } 

    .carousel-control { 
     height: 80px; 
     margin-top: 0; 
     font-size: 120px; 
     text-shadow: 0 1px 1px rgba(0,0,0,.4); 
     background-color: transparent; 
     border: 0; 
     z-index: 10; 
    } 

    .carousel .item { 
     height: 550px; 
    } 
    .carousel img { 
     position: absolute; 
     top: 0; 
     left: 0; 
     min-width: 100%; 
     height: 550px; 
    }

現在我曾嘗試使用媒體查詢，但它只是修復了高度的問題進行了一定的屏幕寬度，並且隨着屏幕最小化，屏幕最終會變得混亂。這裏是我的媒體查詢：

@media (max-width: 979px) { 

     .container.navbar-wrapper { 
     margin-bottom: 0; 
     width: auto; 
     } 
     .navbar-inner { 

     margin: 0px 0px -20px 0; 
     } 

     .carousel .item { 
     height: 300px; 
     } 
     .carousel img { 
     width: auto; 
     height: 300px; 
     } 

} 

@media (max-width: 767px) { 

     .carousel { 
     margin-left: -20px; 
     margin-right: -20px; 
     } 
     .carousel .container { 


     } 
     .carousel .item { 
     height: 350px; 

     } 
     .carousel img { 
     height: 350px; 

     } 


    }

而只是爲了讓你知道，如果它使用所有引導資產像responsive.css，bootstrap.min.css和boostrap.css

來源

2013-07-13 Lucas Santos

你可能任何額外的幫助IM想要檢查是否有某個地方設置了「最小高度」（可能位於引導程序的一個css文件中）。最小高度總是覆蓋最大高度設置。

來源

2013-07-13 14:25:01 SkiWether

我試圖找到一個解決相同的事情，當我到達你的問題，並以某種方式，它幫助了我很多。

我所做的就是像以前一樣使用媒體查詢，併爲最大或最小寬度後的傳送帶內部定義高度。順便說一句，我用BS3和轉盤有.IMG響應（）函數那樣：

> .item { 
display: none; 
position: relative; 
.transition(.6s ease-in-out left); 
// Account for jankitude on images 
> img, 
> a > img { 
    .img-responsive(); 
    line-height: 1; 
} 
}

這部分似乎應對調整圖像的問題。

來源

2013-12-31 13:38:52

不要添加修復的高度，使高度自動這樣

.carousel .item { 高度：自動;

} 

.carousel img { 
     position: absolute; 
     top: 0; 
     left: 0; 
     min-width: 100%; 
     height: auto; 
}

來源

2015-01-08 17:15:27

小孩，試試這些行。他們爲我解決了這個問題。

.carousel .item { 
    margin: 0 auto; 
     min-height: 300px; 
    } 

.carousel-img { 
    margin: 0 auto; 
    min-height: 300px; 
}

我不知道你，但對我來說，這個問題的事實是，我的項目和圖像裏面，沒有任何最小高度。

來源

2015-05-26 02:41:05 Morilon

Twitter Bootstrap輪播響應不正常

回答

相關問題