时间戳

首页 > 解决方案 > Bootstrap 4 固定顶部超出容器限制

html - Bootstrap 4 固定顶部超出容器限制

问题描述

我被困在我的第一个个人项目上。我已经尝试了几个小时将引导程序 4 导航栏固定在顶部，而身体居中（最大宽度 970 像素）。一切都很好，直到包括固定顶，我包括了所有的建议，但没有运气。我尝试了 body padding 50px ，将导航栏包含在容器中。这是我的代码

  body {
  background: #eeeeee;
  font-family: 'Varela Round', sans-serif;
  padding-top: 50px;
}

.content {
  background-color: #fff;
  max-width: 970px;
  margin: 0 auto;
}

.form-inline {
  display: inline-block;
}

.navbar-header.col {
  padding: 0 !important;
}

.navbar {
  background: #fff;
  padding-left: 16px;
  padding-right: 16px;
  border-bottom: 1px solid #d6d6d6;
  box-shadow: 0 0 4px rgba(0, 0, 0, .1);
}

.nav-link img {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  margin: -8px 0;
  float: left;
  margin-right: 10px;
}

.navbar .navbar-brand {
  color: #555;
  padding-left: 0;
  font-size: 20px;
  padding-right: 50px;
  font-family: 'Raleway', sans-serif;
}

.navbar .navbar-brand b {
  font-weight: bold;
  color: #eb5844;
}

.navbar ul.nav li a:hover,
.navbar ul.nav li a:focus {
  color: #f08373 !important;
}

.navbar ul.nav li.active a,
.navbar ul.nav li.active a:hover,
.navbar ul.nav li.active a:focus {
  color: #eb5844 !important;
  background: transparent !important;
}

.search-box {
  position: relative;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-expand-md navbar-expand-lg navbar-light">

  <div class=" navbar-header d-flex col">
    <a class="navbar-brand" href="#">LogoHere</a>
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle navbar-toggler ml-auto">
    			<span class="navbar-toggler-icon"></span>
    			<span class="icon-bar"></span>
    			<span class="icon-bar"></span>
    			<span class="icon-bar"></span>
    		</button>
  </div>
  <!-- Collection of nav links, forms, and other content for toggling -->
  <div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
    <ul class="nav navbar-nav">
      <li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
      <li class="nav-item"><a href="#" class="nav-link">About</a></li>
      <li class="nav-item dropdown">
        <a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Services <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#" class="dropdown-item">Service </a></li>
          <li><a href="#" class="dropdown-item">Serv </a></li>
          <li><a href="#" class="dropdown-item">service </a></li>
          <li><a href="#" class="dropdown-item">service </a></li>
        </ul>
      </li>
      <li class="nav-item"><a href="#" class="nav-link">Books</a></li>
      <li class="nav-item "><a href="#" class="nav-link">Exams</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right ml-auto">

      <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-facebook"></i></a></li>
      <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-twitter"></i></a></li>
      <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-google-plus"></i></a></li>
      <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-slack"></i></a></li>
      <li class="nav-item"><a href="#" class="nav-link">Login</a></li>
    </ul>

  </div>

</nav>

标签： htmlcssnavbarresponsive

解决方案

似乎您所要做的就是将导航后面的内容包装在.container

body {
  background: #eeeeee;
  font-family: 'Varela Round', sans-serif;
  padding-top: 50px;
}

.content {
  background-color: #fff;
  max-width: 970px;
  margin: 0 auto;
}

.form-inline {
  display: inline-block;
}

.navbar-header.col {
  padding: 0 !important;
}

.navbar {
  background: #fff;
  padding-left: 16px;
  padding-right: 16px;
  border-bottom: 1px solid #d6d6d6;
  box-shadow: 0 0 4px rgba(0, 0, 0, .1);
}

.nav-link img {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  margin: -8px 0;
  float: left;
  margin-right: 10px;
}

.navbar .navbar-brand {
  color: #555;
  padding-left: 0;
  font-size: 20px;
  padding-right: 50px;
  font-family: 'Raleway', sans-serif;
}

.navbar .navbar-brand b {
  font-weight: bold;
  color: #eb5844;
}

.navbar ul.nav li a:hover,
.navbar ul.nav li a:focus {
  color: #f08373 !important;
}

.navbar ul.nav li.active a,
.navbar ul.nav li.active a:hover,
.navbar ul.nav li.active a:focus {
  color: #eb5844 !important;
  background: transparent !important;
}

.search-box {
  position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar fixed-top navbar-expand-md navbar-expand-lg navbar-light">
  <div class="container">
    <div class=" navbar-header d-flex col">
      <a class="navbar-brand" href="#">LogoHere</a>
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle navbar-toggler ml-auto">
    			<span class="navbar-toggler-icon"></span>
    			<span class="icon-bar"></span>
    			<span class="icon-bar"></span>
    			<span class="icon-bar"></span>
    		</button>
    </div>
    <!-- Collection of nav links, forms, and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
      <ul class="nav navbar-nav">
        <li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
        <li class="nav-item"><a href="#" class="nav-link">About</a></li>
        <li class="nav-item dropdown">
          <a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Services <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#" class="dropdown-item">Service </a></li>
            <li><a href="#" class="dropdown-item">Serv </a></li>
            <li><a href="#" class="dropdown-item">service </a></li>
            <li><a href="#" class="dropdown-item">service </a></li>
          </ul>
        </li>
        <li class="nav-item"><a href="#" class="nav-link">Books</a></li>
        <li class="nav-item "><a href="#" class="nav-link">Exams</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right ml-auto">

        <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-facebook"></i></a></li>
        <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-twitter"></i></a></li>
        <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-google-plus"></i></a></li>
        <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-slack"></i></a></li>
        <li class="nav-item"><a href="#" class="nav-link">Login</a></li>
      </ul>

    </div>
  </div>
</nav>

<main class="container">
  <h1>HTML Ipsum Presents</h1>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
    sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

  <h2>Header Level 2</h2>

  <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>

  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
      elit sit amet quam. Vivamus pretium ornare est.</p>
  </blockquote>

  <h3>Header Level 3</h3>

  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>

  <pre><code>
#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}
</code></pre>
</main>

推荐阅读