当我使用bootstrap 4时，为什么粘贴标头在表单标签中不起作用？

Question

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

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

有没有办法使用bootstrap修复此问题而不使用其他Javascript？

Image Error:

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

将位置固定在顶部......中殿栏