html - 如何在折叠的导航栏 (Bootstrap 3) 中定位元素？

Question

我正在尝试使用 Bootstrap 制作折叠的导航栏。但是，当我“打开”折叠的导航栏时，所有元素都错位了，而不是彼此堆叠。这是它的样子:

这是我的导航栏代码:

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

.navbar-brand {
  position: absolute;
  transform: translateX(-65%);
  left: 65%;
  position: absolute;
}

.navbar-nav .nav-item {
  float: none;
}

.navbar-divider,
.navbar-nav .nav-item+.nav-item,
.navbar-nav .nav-link + .nav-link {
  margin-left: 0;
}

@media (min-width: 34em) {
  .navbar-brand {
    float: left;
  }
  .navbar-nav .nav-item {
    float: left;
  }
  .navbar-divider,
  .navbar-nav .nav-item + .nav-item,
  .navbar-nav .nav-link + .nav-link {
    margin-left: 1rem;
  }
}

/* Navbar collapse breakpoint */
@media (max-width: 1000px) {
  .navbar-header {
    float: none;
  }
  .navbar-left,.navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .collapse.in {
    display:block !important;
  }
}

/* Navbar styling */
#navbar {

  height: 76.5px;
}

#navbarImg {
  height: 60px;
  position: absolute;
  bottom: 20px;
  top: 5px;
}

.navbar-brand {
  margin: 0; 
  float: none; 
  text-align:center;
}

#navbar > .nav > .nav-item > .navbarButtonDiv > .nav-link {
  position: relative;
  font-family: "Bitter", serif;
  color: Black;
  font-size: 120%;
  top: 14.5px;
  outline: none;
  text-decoration: none;
}

#navbar > .nav > .nav-item > .navbarButtonDiv {
  margin-right: 50px;
  height: 76.5px;
  cursor: pointer;
}

#navbar > .nav > .nav-item > .navbarButtonDiv:hover {
  background-color: #96D5FF;
  transition: 0.2s;
}

#navbar > .nav > .nav-item > #navbarButtonDivHome {
  position: relative;
  width: 130px;
  bottom: 7px;
  right: 240px;
}

#navbar > .nav > .nav-item > #navbarButtonDivHome > a {
  left: 39px;
  top: 23px;
}

#navbar > .nav > .nav-item > #navbarButtonDivAbout {
  position: relative;
  width: 135px;
  bottom: 7px;
  right: 300px;
}

#navbar > .nav > .nav-item > #navbarButtonDivAbout > a {
  left: 41px;
  top: 23px;
}

#navbar > .nav > .nav-item > #navbarButtonDivLearn {
  position: relative;
  width: 135px;
  bottom: 7px;
  right: 360px;
}

#navbar > .nav > .nav-item > #navbarButtonDivLearn > a {
  left: 41px;
  top: 23px;
}

#navbarForm {
  position: absolute;
  left: 1150px;
  top: 18px;
}

#navbarFormSearch {
  width: 127%;
  font-family:"Bitter", serif;
}

#navbarFormSubmit {
  position: absolute;
  height: 38px;
  width: 46px;
  bottom: 16px;
  left: 285px;
}

#navbarFormSubmitFa {
  position: absolute;
  right: 14px;
  bottom: 10px;
}

#navbar > #rightNavbar {
  position: absolute;
  left: 1600px;
}

#navbar > .nav > .nav-item > #navbarButtonDivLogIn {
  position: relative;
  width: 135px;
  bottom: 7px;
  right: 10px;
}

#navbar > .nav > .nav-item > #navbarButtonDivLogIn > a {
  left: 40px;
  top: 23px;
}

#navbar > .nav > .nav-item > #navbarButtonDivSignUp {
  position: relative;
  width: 135px;
  bottom: 7px;
  right: 65px;
}

#navbar > .nav > .nav-item > #navbarButtonDivSignUp > a {
  left: 35px;
  top: 23px;
}

#navbar > .nav {
  position: relative;
  left: 15.5%;
  top: 7px;
}

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <!-- Home -->
        <li class="active nav-item">
          <div class="navbarButtonDiv" id="navbarButtonDivHome">
            <a class="nav-link" href="#home">Home</a>
          </div>
        </li>
        <!-- About -->
        <li class="nav-item">
          <div class="navbarButtonDiv" id="navbarButtonDivAbout">
            <a class="nav-link" href="#about">About</a>
          </div>
        </li>
        <!-- Search -->
        <li class="nav-item">
          <div class="navbarButtonDiv" id="navbarButtonDivLearn">
            <a class="nav-link" href="#learn">Learn</a>
          </div>
        </li>
        <a class="navbar-brand" href="#" id="navbarBrandImg">
          <img src="images/edufeLogo.png" id="navbarImg">
        </a>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <!-- Log In -->
        <li class="nav-item">
          <div class="navbarButtonDiv" id="navbarButtonDivLogIn">
            <a class="nav-link" href="#logIn">Log In</a>
          </div>
        </li>
        <!-- Sign Up -->
        <li class="nav-item">
          <div class="navbarButtonDiv" id="navbarButtonDivSignUp">
            <a class="nav-link" href="#signUp">Sign Up</a>
          </div>
        </li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Answer 1

解决此问题的最简单方法可能是将 navbar-brand 保留在默认位置(在 navbar-header 内)并使用媒体解决它查询。这样，无论视口(viewport)大小如何，它都会始终显示。

工作示例:

@import url(https://fonts.googleapis.com/css?family=Bitter:400,400italic,700);
 body {
  padding-top: 100px;
}
.navbar {
  font-family: 'Bitter', serif;
}
.navbar.navbar-custom .navbar-brand.navbar-brand-centered {
  position: absolute;
  left: 50%;
  top: 0;
  display: block;
  width: 200px;
  text-align: center;
  padding: 0;
}
.navbar.navbar-custom > .wrapper .navbar-brand.navbar-brand-centered {
  margin-left: -100px;
}
.navbar .nav.navbar-nav {
  font-size: 150%;
}
@media (min-width: 768px) {
  .wrapper {
    padding-right: 15px;
  }
  .navbar.navbar-custom .navbar-nav > li > a {
    line-height: 60px;
    transition: background 200ms linear;
  }
  .navbar.navbar-custom .navbar-nav > li > a:hover {
    background: #96D5FF;
  }
}
@media (max-width: 767px) {
  .navbar.navbar-custom {
    padding: 20px 0;
  }
  .navbar.navbar-custom .navbar-collapse {
    margin: 20px 0 -20px;
    border: none;
    box-shadow: none;
  }
  .navbar.navbar-custom .navbar-nav > li > a {
    text-align: center;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">
  <div class="wrapper">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <a class="navbar-brand navbar-brand-centered" href="#/">
      <img src="http://placehold.it/200x90/96D5FF/000?text=LOGO">
    </a>

    <div class="collapse navbar-collapse" id="js-navbar-collapse">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Learn</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Log In</a>
        </li>
        <li><a href="#">Sign Up</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

<div class="container">
  <div class="well">Yup</div>
</div>