Question

我有一个包含5个元素的导航栏，徽标位于中心。当屏幕尺寸< 769px和折叠，我希望从collopased菜单中删除徽标，并显示在页面的左上角。

lib.test_ret_float.restype = c_float

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>

Answer 2

我建议在页面的左上角放置第二个图像，该图像仅在xs和sm断点处可见。把它放在代码的顶部：

 <img src="smallw_red_shaddow_small.jpg" width="152" height="75" alt="" class="visible-xs visible-sm" />

CSS：从折叠菜单中排除中心导航栏项

2 个答案: