Question

所以我正在为FreeCodeCamp做一个挑战，我的导航栏很不稳定。如果你注意到，它并没有穿过整个屏幕，所以有一些空白区域。我似乎能够改变导航栏尺寸的唯一方法是，如果我摆脱溢出：隐藏，但导航栏的行为真的很奇怪。

谢谢！

HTML：

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

Answer 1

有一个名为Apple # "Apple" \s+ # 1 or more spaces f # "f" \d+ # 1 or more digits \s+ # 1 or more spaces m # "m"的包装div元素，其填充设置为.container-fluid（您看到的空白）。要么为此元素使用其他类，要么将15px添加到您的css。

Answer 2

我能够将以下代码添加到css的顶部：

.container-fluid {
  padding: 0;
}

只要此代码低于在现场网站上对Bootstrap的任何调用，您就不应该！重要。

Answer 3

根据Bootstrap 3.3.7 documentation，将navbar和navbar-fixed-top类添加到nav标记，因为它是您正在使用的版本，并添加了{{1}转到你的“subnav”元素所使用的margin-top: 80px类，因此滚动到顶部时它不会落在导航栏后面。

另外，请记住将其余的bootstrap依赖项导入到项目中，即bootstrap主题及其JS函数。

Portfolio Page Link

Answer 4

我不是很擅长CSS，但我相信.引用了一个类，.button我建议使用inspect元素（ctrl-shift-i）改变你的div想要100％，例如在我的例子中： My rats html

导航栏不会遍历整个页面

4 个答案: