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

时间：2017-10-26 19:06:26

标签： css html5 twitter-bootstrap-3

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

桌面视图： Bootstrap nav menu Desktop View

移动视图： Bootstrap nav menu Mobile View 这是我的css / html：

＆＃13;
＆＃13; 
/* 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%);
  }
}
＆＃13; 
<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 -->
＆＃13;
＆＃13;
＆＃13;

任何人都可以帮忙解决这个问题吗？

1 个答案:

答案 0 :(得分：2)

好的，你走了。左侧菜单，徽标居中，右侧登录。下面的汉堡包堆打开一个全宽度菜单。

我将左侧菜单向左侧浮动，右侧向右侧浮动。为了使徽标位于中间位置，我绝对将它定位，然后将其从左侧设置为50％，减去徽标宽度的一半。我取消了导航栏默认设置，以摆脱引导程序自动添加的灰色背景。同时也取消了前三个ul所在的导航栏崩溃div的崩溃。这样在移动时就不会消失。我让左右菜单里面的li显示为内联块，这样它们就会相互连接。由于汉堡包堆栈的下拉菜单绝对定位，我添加了一个右：0使其宽度为fI'll。我想这几乎就是一切。

.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 -->

相关问题
最新问题