導航欄不會遍及整個頁面

Question

因此，我正在為FreeCodeCamp挑戰，我的導航欄很不穩定。 如果您注意到，它並沒有遍及整個屏幕，因此會有一些空白。 我似乎能夠更改導航欄尺寸的唯一方法是，如果我擺脫了overdow：hidden，但隨后導航欄的行為確實很奇怪。

https://codepen.io/mso122591/pen/boowZv

謝謝！

HTML：

 ul { list-style-type: none; margin-lef: 100; padding: 0; overflow: hidden; } li { display: inline; float: right; } li a { display: block; padding-top: 20px; padding-bottom: 20px; padding-right: 20px; padding-left: 100px; font: bold 30px/50px Georgia, serif; background-color: #66ccff; } li a:hover { background-color: #b3e6ff; } .left-middle-text { margin-left: 150px; } .portfolio-text { margin-left: -200px; margin-top: -1200px; text-align: center; background-color: white; color: white; z-index: 5; } .background-blue { background-color: #66ccff; } .background-silver { background-color: silver; } .portfolio-placeholder { background-color: silver; padding: 20px; margin: 20px; width: 300px; height: 300px; } .social-two { width: 50px; height: 50px; display: block; z-index: 5; } .social { padding-top: 20px; margin-left: 1400px; width: 20px; height: 20px; display: block; z-index: 5; } .white { color: white; } .ptext {} h1 { font-size: 60px; } .box { border-style: solid; border-color: black; border-width: 5px; text-align: center; margin-top: 100px; margin-left: 300px; padding: 60px; font-family: "Comic Sans MS"; font-size: 40px; } .black-box { background-color: black; width: 100%; height: 200px; margin-top: -150px; z-index: -1; } .col-xs-6 { text-align: center; } dbody { padding: 20px; font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; } div.wrapper { float: left; /* important */ position: relative; /* important(so we can absolutely position the description div */ } div.description { position: absolute; /* absolute position (so we can position it where we want)*/ top: 0px; /* position will be on bottom */ margin-left: 100px; width: 80%; height: 90%; /* styling bellow */ background-color: white; color: white; opacity: 0.2; /* transparency */ filter: alpha(opacity=40); /* IE transparency */ } .image-static { position: fixed; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container-fluid"> <div class="background-blue"> <ul> <li> <a href="https://www.facebook.com/mike.oelbaum"><img class="social-two" alt="Facebook page. " src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAclBMVEU6WJf////29/oeRo4sTpKwudAyU5S6wtV3iLJ7i7MtT5M2VZYoTJEYQ43t7/SIl7tIY57N0+JRaqHl6fDa3unDydu0vNK+xdhid6lsf6yosstYb6PS1+Rne6rn6vGDkriapcORnr8SQIzd4epDX5uhrMfw5inQAAAETklEQVR4nO3dW3eiMBSG4dCEjCVBDioe2tp2tP//Lw7YOkPX6BhkSPbO+t4rb3TxLAwIQRBJv31TbErBuXJTNPtvJtF7nZZSaRN6GUdmtJJlelGYKstdd85Ylf4lnNc29HL912w9/y6sZCzr75yRVV+4zkMv0ATl6z/CKkZgS6zOwrkMvSwTJedfwjq2MXjO1J/CNK6taD+bnoQq9HJMmOqEEa/C00oUSRnrKOwyZSIWsW5IP5ML0cQ8DNuB2IhCh16ISdOF2MQ8DNuBuBG8D3hvF7sPIYQQQgghhH5ntM4yZbvkqdNLq1TG/ujd6MzKPKu3xduuWVXPy8NhsVgcDsvlc7VaN+luxpnY4vLy8WN1eEiut+Z6JtRoK7e753/QvvrBU6jl8c1Bx1VobPZ+cOOxFGr5tHLmMRQauVkO8bET2tJx9DEVGrkb6uMlVL+vDolUKIs7fJyEeXMXkI8wH7SLYCi8G8hFKO/8irIRqvs2MnyEp6t6ohbK/W0Ia6H9GAHkIDTlGCAHoRz8Y5uZUG9HARkI8zGbGQ5C/ToOSF84dhWSF+rZSCB5oRx4VoadcNTvNRZCe/8xBROhHA0kLtSPsQttFb1wPJD27NrgL+l+tSu2T0fdTQRbfaxfZsXHK+UZUrseoJun20zaLNPmfM22MUZntGe5pfs57upFKtKWi7kf+u6fJD9eW/buCPyRM/0zgXU8C/zG9i89jsPwnS1QaCdgwxjodIJmz/j/ydmbi/CJ6Uamy2l/X/H9jrZCl2tmXljuB7+S/7pa7asHxqPQ7cBiRfnA4VZOp2g+stCLOSKn84ikD41u5fSrlPW/WzOXWcMjZ6FyOZHIeUPjdmTBeX8vrMPE6ANvocOMBe+75sjFbSHv21m4XGKyZL2lcTnCf+YtdPjhXUFIOhch60MLJ+Ga9Y1znITRr0Pac4O3chHyvr0ThBASSl/up4MwlVfe3Cv8WQDzeLmtyx5/duXNvcKfysluQ0YVfp85tTD8PhNCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhBDCWIThZ9fM4+xiTjOk28vv7UVghjT+We5ruVypkPK4UuFKEEJIPwghpB+EENIPQgjpByGE9IMQQvpBCCH9IISQfhBCSD8IIaQfhBDSD0II6QchhPSDEEL6QQgh/SCEkH4QQkg/CCGkH4QQ0g9CCOkHIYT0gxBC+kEI4aDK//Q5g/IoLEWQP+37E5qNKEI8ZdCfUBciyCMI/AlVI4I8/MufUC5EUgYYiN6EpkxEkga4A4o3oU1bYRJgIHoTqqQTBliJvoTtKuyESe19JHoSnh473An9Py3Sk/D0EMJOmFS+n4DtR5hXyVmYrD0TvQjzzyfUfwqTSnodix6ERlZJX5jMa59b1OmFtj4/CFT0PtF6W48TC43tdhN/CdvPPErl5wZhEwqNVvKY9j5HfPvURVNsfBwSTycsN0Xz/WHDvwC3A1K2lfV16AAAAABJRU5ErkJggg=="></a> </li> <li> <a href="https://www.linkedin.com/in/michael-oelbaum-13253485/"><img class="social-two" alt="Linkedin page. " src="data:image/png;base64,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"></a> </li> <li><a onclick="scrollWin()">Portfolio</a></li> </ul> </div> </div> <div class="background-silver"> <h2 style="text-align:center;"> Michael Oelbaum </h2> <h3 style="text-align:center"> Front-End Developer and UX/UI designer with experience in Japanese translation/interpretation </div> <!--Itachi background code --> <div class='wrapper'> <!-- image --> <div id="theFixed" style="position:fixed;top:200px"> <img src="https://images3.alphacoders.com/144/thumb-1920-144565.jpg" alt="Itachi Background. "> <h1 class="white portfolio-text"> Portfolio </h1> <div class='description'> </div> </div> <!-- description div --> <!-- description content --> </div> <h1 id=P ortfolio class="white portfolio-text"> Portfolio </h1> <div class="row"> <div class="col-xs-6"> <div class="portfolio-placeholder box">Coming Soon!</div> <div class="portfolio-placeholder box">Coming Soon!</div> <div class="portfolio-placeholder box">Coming Soon!</div> </div> <div class="col-xs-6"> <div class="portfolio-placeholder box">Coming Soon!</div> <div class="portfolio-placeholder box">Coming Soon!</div> <div class="portfolio-placeholder box">Coming Soon!</div> </div> </div> <!-- end description content --> </div> <!-- end description div --> 

Answer 1

有一個名為.container-fluid的wrapper div元素，其任一側的填充設置為15px （您看到的空白）。 請為此元素使用其他類，或向您的CSS添加padding: 0px !important 。

Answer 2

我能夠將以下代碼添加到css的頂部：

.container-fluid {
  padding: 0;
}

只要此代碼在活動站點上對Bootstrap的任何調用之下，您都不需要！important。

Answer 3

根據Bootstrap 3.3.7文檔 ，將navbar和navbar-fixed-top類都添加到了nav標簽中，鑒於它是您正在使用的版本，並向您使用的background-silver類添加了margin-top: 80px用於“ subnav”元素，因此當您滾動到頂部時，它不會在導航欄后面。

另外，請記住將其余的引導程序依賴項導入到您的項目中，也就是引導程序主題及其JS函數。

投資組合頁面鏈接

Answer 4

我不太擅長CSS，但是我相信. 指的是一個類，即.button我建議使用inspect element（ctrl-shift-i）將您想要的div更改為100％，例如在我的示例中： 我的老鼠html