html - 在我的标题中看不到 Bootstrap-hamburger-menu 图标，并且部分导航列表元素最终位于 Logo 图像下

Question

这是我的第一篇文章。我对编码还很陌生，这就是我到目前为止的标题。 问题是，根本没有显示汉堡包菜单按钮，而且 ul 的部分内容在我的 Logo 图像下方结束。 我已经尝试了两天来弄清楚似乎是什么问题，但我只是一个初学者，只能自己找到解决方案。 如果我把这段代码贴错了请原谅我(我不知道为什么代码是无色的)

$(window).scroll(function(){
      if($(this).scrollTop() >= 100) {
        $("body").addClass("sleek");
      }
      else{
        $("body").removeClass("sleek");
      }

    })

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

body {
	background-color: #E8E8EE;
	padding-top: 130px;
	}

.header_wrapper {
	border-bottom: #d89766 2px solid;
	padding: 20px;
	background-color: #1d1a3d;
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 1050;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	height: 90px;
}
.sleek .header_wrapper {
	padding: 5px;
	background-color: #1d1a3d;
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 1050;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	vertical-align: middle;
	height: 55px;
	}
.brand {
	max-width: 200px;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	margin-top: -1px;
	}
 .sleek .brand {
	max-width: 160px;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	margin-top: 2px;
}
.nav.navbar-nav {
	overflow-x: hidden;
}
.nav.navbar-nav a{
	float: left;
	color: #f5f5f5;
	font-size: 16px;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}
.sleek .nav.navbar-nav a{
	color: #f5f5f5;
	font-size: 16px;
	margin-top: -3px;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}
.nav.navbar-nav li{
	margin-right: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Header -->
<header class="header_wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-4">
        <a href="index.html">
        <img src="bilder/logo1cropped.png" class="brand">
        </a>
      </div>
      <div class="col-sm-8">
        <button type="button" class="navbar-toggle" data-toggle="navHeaderCollapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navHeaderCollapse">

         <ul class="nav navbar-nav">
          <li><a href="index.html">Speltips</a></li>
          <li><a href="oddsbonusar.html">Oddsbonusar</a></li>
          <li><a href="tv-matcher.html">TV-matcher</a></li>
          <li><a href="casinobonusar.html">Casinobonusar</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
</header>
<!-- Header -->

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
      <div class="content_wrapper">
        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
      </div><div class="content_wrapper">
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
    </div><div class="content_wrapper">
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
  </div><div class="content_wrapper">
  Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
</div>
</div>
<div class="col-sm-8">
 <div class="content_wrapper">
  Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
</div><div class="content_wrapper">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
</div><div class="content_wrapper">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
</div>
</div>
</div>
</div>

Answer 1

滚动和调整视口(viewport)大小有点不同，但我已经将 JSFiddle 放在一起了 here .

几个位:

• 当您使用 bootstrap 和您尝试做的事情时，您可以更接近他们的标准。我刚刚为此调整了 html。
• 不过，我已经添加了一些 css 来覆盖 background: transparent 样式来为您的按钮添加边框并生成“汉堡包”和
• 我不得不添加一点 jQuery，因为 onClick 出错了。不知道为什么。

它并不完美，但我希望它能帮助你。要让导航消失并显示按钮，请水平缩小屏幕。