css - 使用引导导航栏折叠时在移动 View 中显示内联元素

Question

我无法理解如何在 Bootstrap 的移动/表格 View 中正确对齐社交媒体图标(左)和 Logo (中心)。我希望汉堡菜单旁边的标志和一些图标即使在切换到移动 View 时也能看到，但它对我来说没有正确对齐，并且在进入移动 View 时它显示为垂直而不是水平。

桌面 View :

移动 View : 这是我的 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

好的，开始吧。左侧为左侧菜单， Logo 居中，右侧为登录。下面的汉堡包堆栈会打开一个全宽菜单。

我将左侧菜单向左浮动，将右侧菜单向右浮动。为了使 Logo 居中，我将其绝对定位，然后将其设置为距左侧 50%，减去 Logo 宽度的一半。我取消了默认导航栏以摆脱 Bootstrap 自动放置在其上的灰色背景。还取消了前三个 ul 所在的 navbar-collapse div 的折叠。这样它在移动时就不会消失。我将左右菜单中的 li 设置为显示内联 block ，这样它们的链接就会彼此相邻。由于汉堡包的下拉菜单是绝对定位的，因此我添加了一个 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 -->