使用引导导航栏折叠时在移动视图中显示内联元素

Question

我无法理解如何在引导程序的移动/表格视图中正确对齐社交媒体图标（左）和徽标（中）。我希望即使在切换到移动视图时也能看到汉堡菜单旁边的徽标和一些图标，但它对我来说没有正确对齐，并且在进入移动视图时它会垂直显示而不是水平显示。

桌面视图：

移动视图： 这是我的 css/html：

/* Style for "Signup Rectangle" */
.sign-up:hover, .log-in:hover {
  cursor: pointer;
  border: 1px solid #ffffff;
  text-align: center;
}

/* Style for "SIGN UP" */
.sign-up {
  color: #ffffff;
  font-family: Raleway;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
}

/* Style for "LOG IN" */

.log-in {
  color: #ffffff;
  font-family: Raleway;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
}

/* Style for "Linkedin, Twitter, Facebook" */
.instagram-logo, .twitter-logo, .facebook-logo {
  width: 20px;
  height: 21px;
  filter: invert(100%);
}

.logo {
  width: 128px;
  height: 53px;
}

.navbar-container {
  padding-top: 18px !important;
}

.panorama {
  padding-top: 140px;
  height: 100vh;
  min-height: 400px;
}

.affix {
  -webkit-transition: padding 0.2s ease-out;
  -moz-transition: padding 0.2s ease-out;
  -o-transition: padding 0.2s ease-out;
  transition: padding 0.2s ease-out;
}

.affix-top {
  background: transparent;
  border-color: transparent;
  padding: 15px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.icon-bar {
  background-color:#fff !important;
}

.affix-top .nav > li > a {
   color: #000;
   filter: invert(100%);
}

.navbar-nav > li > a {
  padding-bottom: 35px;
}

.affix-top .navbar-collapse {
   border-color: transparent;
   box-shadow: initial;
}

/*************MEDIA QUERIES **************/

@media (min-width: 768px) {
  .navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }
}

<nav>
  <div class="container-fluid">
    <div class="navbar navbar-default navbar-fixed-top" data-spy="affix" data-offset-top="400">
      <div class="container">
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-container">
            <li><a href="#"><img class="instagram-logo" src="{{route('cacheImage', ['newDesign', 'instagram.png']) }}"></a></li>
            <li><a href="#"><img class="facebook-logo" src="{{route('cacheImage', ['newDesign', 'facebook.png']) }}"></a></li>
            <li><a href="#"><img class="twitter-logo" src="{{route('cacheImage', ['newDesign', 'twitter.png']) }}"></a></li>
          </ul>
          <ul class="nav navbar-nav navbar-header navbar-center">
            <li>
              <a href="#">
                <img class="na-logo" alt="" src="{{route('cacheImage', ['newDesign', 'logo.png']) }}">
              </a>
            </li>
          </ul>
          <ul class="nav navbar-right navbar-nav navbar-container">
            <li>
              <a class="sign-up">SIGN UP</a>
            </li>
            <li>
              <a class="log-in">LOG IN</a>
            </li>
          </ul>
        </div>
        <!-- Mobile Burger Menu -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-burger-menu">
              <span class="sr-only">Navigation Menu</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <ul id="navbar-burger-menu" class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div>
        <!-- Mobile Burger Menu End -->
        <!-- Mobile / Table view End -->
      </div>
    </div><!-- /.navbar -->
  </div><!-- /.container-fluid -->
  <section class="panorama" style="background: url({{route('cacheImage', ['newDesign', 'panorama.png']) }}) no-repeat; background-size:cover; background-position:center;">
    <div class="container">
      <h1 class="text-center">Hello.</h1>
    </div>
  </section><!-- panorama navigation section end -->
</nav><!-- .navbar end -->

有人可以帮忙吗？

Answer 1

好的，来吧。左侧菜单，徽标居中，右侧登录。下方的汉堡包会打开一个全宽菜单。

我将左侧菜单浮动到左侧，将右侧菜单浮动到右侧。为了使徽标居中居中，我将其绝对定位，然后将其设置为距左侧 50%，减去徽标宽度的一半。我取消了导航栏默认设置以摆脱引导程序自动放置的灰色背景。还消除了前三个 ul 所在的 navbar-collapse div 的崩溃。这样它在移动时就不会消失。我将左右菜单中的 li 设置为显示内联块，这样它们的链接就会彼此相邻。因为你的汉堡包的下拉菜单是绝对定位的，所以我添加了一个 right:0 以使其充满宽度。我认为这几乎就是一切。

.navbar-left{
  float:left;
}
.navbar-left.nav>li, .navbar-right.nav>li{
  display:inline-block;
}
.navbar-right{
  float:right;
}
.navbar-center{
  position: absolute;
  left: calc(50% - 25px);
}
#navbar-burger-menu{
  right:0;
}
/* Style for "Signup Rectangle" */
.sign-up:hover, .log-in:hover {
  cursor:pointer;
  border: 1px solid #ffffff;
  text-align:center;
}

/* Style for "SIGN UP" */
.sign-up {
  color: #ffffff;
  font-family: Raleway;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
}

/* Style for "LOG IN" */

.log-in {
  color: #ffffff;
  font-family: Raleway;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
}

/* Style for "Linkedin, Twitter, Facebook" */
.instagram-logo, .twitter-logo, .facebook-logo{
  width: 20px;
  height: 21px;
  filter: invert(100%);
}

.logo {
  width: 128px;
  height: 53px;
}

.navbar-container {
  padding-top:18px !important;
}

.panorama {
  padding-top:140px;
  height:100vh;
  min-height:400px;
}

.affix {
  -webkit-transition:padding 0.2s ease-out;
  -moz-transition:padding 0.2s ease-out;
  -o-transition:padding 0.2s ease-out;
  transition:padding 0.2s ease-out;
}

.affix-top {
  background:transparent;
  border-color:transparent;
  padding: 15px;
  -webkit-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
  transition:all 0.5s ease;
}

.icon-bar {
  background-color:#fff !important;
}

.affix-top .nav > li > a {
  color: #000;
  filter: invert(100%);
}

.navbar-nav > li > a {
  padding-bottom:35px;
}

.affix-top .navbar-collapse {
  border-color:transparent;
  box-shadow:initial;
}

/*************MEDIA QUERIES **************/

@media (min-width: 768px) {
  .navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }
}

<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
  <div class="container-fluid">
    <div class="navbar navbar-fixed-top" data-spy="affix" data-offset-top="400">
      <div class="container">
        <div class="navbar-collapse ">
          <ul class="nav navbar-nav navbar-container navbar-left">
            <li><a href="#"><img class="instagram-logo" src="http://www.fillmurray.com/100/100"></a></li>
            <li><a href="#"><img class="facebook-logo" src="http://www.fillmurray.com/100/100"></a></li>
            <li><a href="#"><img class="twitter-logo" src="http://www.fillmurray.com/100/100"></a></li>
          </ul>
          <ul class="nav navbar-nav navbar-header navbar-center">
            <li>
              <a href="#">
                <img class="na-logo" alt="" src="http://www.fillmurray.com/50/50">
              </a>
            </li>
          </ul>
          <ul class="nav navbar-right navbar-nav navbar-container">
            <li>
              <a class="sign-up">SIGN UP</a>
            </li>
            <li>
              <a class="log-in">LOG IN</a>
            </li>
          </ul>
        </div>
        <!-- Mobile Burger Menu -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-burger-menu">
              <span class="sr-only">Navigation Menu</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <ul id="navbar-burger-menu" class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div>
        <!-- Mobile Burger Menu End -->
        <!-- Mobile / Table view End -->
      </div>
    </div><!-- /.navbar -->
  </div><!-- /.container-fluid -->
  <section class="panorama" style="background: url(http://www.fillmurray.com/g/200/300) no-repeat; background-size:cover; background-position:center;">
    <div class="container">
      <h1 class="text-center">Hello.</h1>
    </div>
  </section><!-- panorama navigation section end -->
</nav><!-- .navbar end -->