Question

我希望一些元素始终显示在导航栏中 - 即使菜单已折叠。

我使用标准的navbar-bav类：

  <ul class="nav navbar-nav pull-right">
    <li>
      <div id="message" class="pull-right"><i class="fa fa-envelope fa-2x"></i></div>
    </li>
  </ul>

https://codepen.io/pepe007/pen/pwmyxZ

问题：我希望div #message在大屏幕和小屏幕上都显示在菜单上。

Answer 1

您可以重新排列元素，将它们放在弹性行中，然后使用邮件图标上的margin-left: auto将其按下，将菜单/下拉按钮放在右侧。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/4db07c8d8d.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <style>
    #logo {
      width: 250px;
      background: deepskyblue;
    }
    
    #popups {
      padding-right: 15px;
    }
    
    #user {
      display: inline;
      background: olivedrab;
      padding: 15px;
    }
    
    #message {
      display: inline;
      background: lightcoral;
      padding: 15px;
    }
    
    .message {
      margin-left: auto;
    }
    
    .navbar-header, .navbarContainer {
      display: flex;
      align-items: flex-start;
    }
    
    .container > .navbar-header {
      margin-right: 0;
    }
    
    .navbar-nav {
      margin: 0 0 0 auto;
    }
    
    .fa-envelope {
      font-size: 14px;
    }
    .nb {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    }
  </style>
  <nav class="navbar navbar-default">
    <div class="container navbarContainer">

      <div class="navbar-header">


        <a class="navbar-brand" href="#" id="logo">Brand</a>
        <ul class="nav pull-left">
          <li>
            <div id="user" class="pull-left"><i class="fa fa-user"></i> User</div>
          </li>
        </ul>
      </div>
      <ul class="nav navbar-nav message">
        <li>
          <div id="message" class="pull-right"><i class="fa fa-envelope fa-2x"></i></div>
        </li>
      </ul>
      <div class="nb">
      
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

      <div class="collapse navbar-right navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="#">Menu 0</a></li>
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
        </ul>
      </div>
      </div>

      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>

  <div class="container">
    <div class="alert alert-warning">We are but visitors on this rock, hurling through time and space at sixty-six thousand miles an hour.</div>
  </div>

</body>

＆＃13;

Bootstrap导航栏 - 在BOTH桌面和移动设备中对齐元素

1 个答案: