为什么当我使用Bootstrap 4时，为什么粘性标头无法使用表单标签工作

Question

为什么表单输入或按钮与我的导航标头重叠？当我不使用Bootstrap 4时，它正常工作。

我希望标题位于我网站上的所有对象的顶部。

有没有一种方法可以使用bootstrap不使用其他JavaScript？

图像错误：

window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
.top-container {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}
.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}
.content {
  padding: 16px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.sticky + .content {
  padding-top: 102px;
}
.form-control {
	width: 40%;
}

<div class = "container-fluid">
<div class="top-container">
<h1>Main Header</h1>
<p>Scroll down to see the sticky effect.</p>
</div>
<div class="header" id="myHeader">
<h2 class = "navbar fixed-top">Navigation Header</h2>
</div>
<div class="content">
		
<div class = "row">
  <div class = "col-sm-12">
    <form action = "#" method = "post">
      <div class = "form-group">
        <label>Name:</label>
         <input type = "text" name = "name" class = "form-control" />
       </div>
     </form>
</div>
</div>
					

Answer 1

设置位置固定顶部...中殿bar