不能有自舉導航欄和傳送帶在頁

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>Inteenships</title> 
    <link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 

    <nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 

     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Inteenships</a> 
     </div> 

     <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
     </ul> 
     </div> 

    </div> 
    </nav> 





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



    <div class="carousel-inner" role="listbox"> 

     <div class="item active"> 
     <img src="..." alt="Picture 1"> 
     <div class="carousel-caption"> 
      <h1> 
      Picture 1 
      </h1> 
      <p> 
      Nothing Special 
      </p> 
     </div> 
     </div> 

     <div class="item"> 
     <img src="..." alt="Picture 2"> 
     <div class="carousel-caption"> 
      <h1> 
      Picture 2 
      </h1> 
      <p> 
      Nothing Special 
      </p> 
     </div> 
     </div> 

     <div class="item"> 
     <img src="..." alt="Picture 3"> 
     <div class="carousel-caption"> 
      <h1> 
      Picture 3 
      </h1> 
      <p> 
      Nothing Special 
      </p> 
     </div> 
     </div> 

    </div> 

    <a href="#myCarousel" class="left carousel-control" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous Slide</span> 
    </a> 
    <a href="#myCarousel" class="right carousel-control" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next Slide</span> 
    </a> 



    </div> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

我想在我的主頁上有一個引導程序的導航欄和傳送帶，但旋轉木馬不會出現，當我加載它。如果我擺脫了導航欄，旋轉木馬會出現，但在導航欄的位置。我的代碼中是否有錯誤？我只有一個重置樣式在我的CSS：不能有自舉導航欄和傳送帶在頁

*{ 
    padding: 0; 
    margin: 0; 
}

然而，這並不影響什麼。有什麼我需要刪除或添加爲了得到這個工作？

附加問題：我是相當新的HTML/CSS。帶有一類容器的div有什麼意義？

來源

2017-07-12 cerrach

navbar將有位置：固定;所以給你的身體填充頂部。

body{ padding-top: 51px}

51px是你的導航欄的高度。

容器是一個具有固定寬度（不同分辨率的不同寬度）和空白左右自動的引導類，它會將具有類容器的div對齊到左邊和右邊相等的空間。

來源

2017-07-12 05:38:57

Ayy它的工作，感謝的人。 – cerrach

我還有一個擔心......當導航欄崩潰時，有沒有辦法將旋轉木馬向下滑動？ – cerrach

向下滑動傳送帶？你的意思是下降。也導航欄崩潰意味着低於767分辨率？ –

.navbar-fixed-top使navbar的位置固定，當您的傳送帶的位置：相對時不計算。所以在旋轉木馬類上添加一些邊距或填充，或者移除.navbar-fixed-top類。

.carousel 
{ 
    margin-top:60px; 
}

來源

2017-07-12 05:43:46

不能有自舉導航欄和傳送帶在頁

回答

相關問題