Scaling Bootstrap Carousel

我正在使用bootstrap（新增功能），我正在嘗試創建一個旋轉木馬，佔用頁面的60％左右，並在底部留出一些空間，並且在窗口縮小到移動大小等等。現在，當窗口被調整大小時，旋轉木馬逐漸消失，然後在窗戶尺寸最小時完全消失。這裏是我的代碼：Scaling Bootstrap Carousel

<link rel="stylesheet" type="text/css" href="CSS/StyleSheet.css"> 
<link rel="stylesheet" href="Bootstrap/css/bootstrap.css"> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 

<body> 


<!--Navigation bar--> 

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand">B Media</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li><a href="#" class="active">Home</a></li> 
     <li><a href="#">History</a></li> 
     <li><a href="#">Technique</a></li> 
     <li><a href="#">Gallery</a></li> 
    </ul> 
    </div> 
</nav> 

<div class="container"> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 

    <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> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <img src="Images/img1.jpg" alt="Chania" class="CarouselImages"> 
     <div class="carousel-caption"> 
     </div> 
    </div> 


    <div class="item"> 
     <img src="Images/img2.jpg" alt="Flower" class="CarouselImages"> 
     <div class="carousel-caption"> 
     </div> 
    </div> 

    <div class="item"> 
     <img src="Images/img3.jpg" alt="Flower" class="CarouselImages"> 
     <div class="carousel-caption"> 
     </div> 
    </div> 
    </div> 
    </div> 
</div>

任何幫助，將不勝感激，也如果有人能告訴我爲什麼我的圖片加載在瀏覽器中上下顛倒，這也將是一個大的幫助。

來源

2016-01-27 user3355961

首先，我建議你閱讀[http://getbootstrap.com/css/#grid]（引導CSS章節），它提供了關於如何嵌套'container' =>'row' =>'col - * - *'的重要信息。你還應該在你的''內使用'class =「img-responsive」'來調整圖片的大小。認爲你的旋轉木馬的大小將取決於你的圖像高度。 – SunnyOne

我會這樣做，謝謝 – user3355961

在你的CSS文件寫入：

header.carousel { 
    height: 60%; 
}

應該適用於所有設備：移動和桌面。

用於在你的CSS傳送帶寫的底部的一些空間：

.carousel-inner { 
    margin-bottom:50px; /*adjust accordingly*/ 
}

來源

2016-05-08 15:36:09 Arcsn

Scaling Bootstrap Carousel

回答

相關問題