html - CSS:从折叠菜单中排除中心导航栏元素

Question

我有一个包含 5 个元素的导航栏， Logo 位于中间。当屏幕尺寸 < 769px 并且折叠时，我希望 Logo 从折叠菜单中删除，并出现在页面的左上角。

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsible-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 class="row collapse navbar-collapse" id="collapsible-navbar">

      <div class="col-sm-2 text-center">
        <ul class="nav navbar-nav navbar-left">
          <li class="navbar-link"><a href="#" class="navbar-link-header">1</a>
          </li>
          <ul class="dropdown-nav row clients">
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 1</a>
            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 2</a>
            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 3</a>
            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 4</a>
            </li>
          </ul>
        </ul>
      </div>

      <div class="col-sm-2">
        <ul class="nav navbar-nav navbar-left">
          <li class="navbar-link"><a href="#" class="navbar-link-header">Locations</a>
          </li>
          <ul class="dropdown-nav row locations">
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Newton, MA</a>
            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Peadbody, MA</a>
            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Houston, TX</a>
            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Dallas, TX</a>
            </li>
          </ul>
        </ul>
      </div>

      <div class="col-sm-4 text-center logo">
        <img src="smallw_red_shaddow_small.jpg" width="152" height="75" alt="" />
      </div>

      <div class="col-sm-2">
        <ul class="nav navbar-nav navbar-right">
          <li class="navbar-link"><a href="#" class="navbar-link-header">Information</a>
          </li>
          <ul class="dropdown-nav row information">
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">5</a>
            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">6</a>
            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">7</a>
            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">8</a>
            </li>
          </ul>
        </ul>
      </div>

      <div class="col-sm-2">
        <ul class="nav navbar-nav navbar-right">
          <li class="navbar-link"><a href="#" class="navbar-link-header">Sign In</a>
          </li>
          <ul class="dropdown-nav row sign_in">
            <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">A</a>
            </li>
            <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">B</a>
            </li>
            <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">C</a>
            </li>
          </ul>
        </ul>
      </div>

    </div>
  </div>
</nav>

Answer 1

最简单的解决方案是将两张图片都放在您想要的位置，然后使用显示属性在媒体查询时显示和隐藏它们。

参见示例。

@media (min-width: 768px) {
  .navbar .navbar-brand {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsible-navbar"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <a class="navbar-brand" href="#block-one">
        <img src="http://placehold.it/350x150/f00" width="152" height="20" alt="" />
      </a>

    </div>
    <div class="row collapse navbar-collapse" id="collapsible-navbar">
      <div class="col-sm-2 text-center">
        <ul class="nav navbar-nav navbar-left">
          <li class="navbar-link"><a href="#" class="navbar-link-header">1</a>

          </li>
          <ul class="dropdown-nav row clients">
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 1</a>

            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 2</a>

            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 3</a>

            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 4</a>

            </li>
          </ul>
        </ul>
      </div>
      <div class="col-sm-2">
        <ul class="nav navbar-nav navbar-left">
          <li class="navbar-link"><a href="#" class="navbar-link-header">Locations</a>

          </li>
          <ul class="dropdown-nav row locations">
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Newton, MA</a>

            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Peadbody, MA</a>

            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Houston, TX</a>

            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Dallas, TX</a>

            </li>
          </ul>
        </ul>
      </div>
      <div class="col-sm-4 text-center logo hidden-xs">
        <img src="http://placehold.it/350x150/f00" width="152" height="75" alt="" />
      </div>
      <div class="col-sm-2">
        <ul class="nav navbar-nav navbar-right">
          <li class="navbar-link"><a href="#" class="navbar-link-header">Information</a>

          </li>
          <ul class="dropdown-nav row information">
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">5</a>

            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">6</a>

            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">7</a>

            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">8</a>

            </li>
          </ul>
        </ul>
      </div>
      <div class="col-sm-2">
        <ul class="nav navbar-nav navbar-right">
          <li class="navbar-link"><a href="#" class="navbar-link-header">Sign In</a>

          </li>
          <ul class="dropdown-nav row sign_in">
            <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">A</a>

            </li>
            <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">B</a>

            </li>
            <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">C</a>

            </li>
          </ul>
        </ul>
      </div>
    </div>
  </div>
</nav>