Question

我正在研究Bootstrap navbar并在调整大小后，因为汉堡包菜单显示徽标会改变其位置甚至溢出navbar。如何使徽标响应，以便在窗口中调整navbar大小时更改其大小或位置？

        <!-- Navigation Bar -->
    <div class="navbar navbar-default" id="navbar-outer">
<div class="container-fluid" style="margin:0px;">


           <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
   <span class=" glyphicon glyphicon-menu-hamburger"></span>
                </button>
           </div>
                <a class="navbar-brand" href="#">
                     <img src="../images/LOL_LOGO_NEW-01.png" />
                </a>
     <div class="collapse navbar-collapse" id="menu"> 
            <ul class="navbar navbar-nav" id="navbar-menu">
                <li><a href="#" >WHAT WE DO</a></li>
                <li><a href="#">WHO WE ARE</a></li>
                <li><a href="#">OUR WORK</a></li>
                <li><a href="#">VENTURES</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">CONNECT</a></li>
            </ul>
    </div>
</div>

另外，如果你能告诉我为什么会发生这种情况的原因那么答案就会得到答案，因为我还处于学习阶段，所以我将不胜感激。

感谢。：）

without resizing it looks normal

look how it overflows on resize

Answer 1

我添加了一些背景颜色，因此您可以轻松查看每个容器的块。徽标将为red，导航栏标题为yellow，导航栏合并为green。

navbar-brand有一个float: left所以它会浮动到块的左侧，如果你在navbar-header之后拥有它（它有display:block所以它将需要整个屏幕的宽度）阻止它只是向下漂浮，你可以在navbar-header内移动它或在容器流体外移动它。

＆＃13;

.navbar-brand {
  background: red;
  float: right;
  display: block;
}

.navbar-header {
  background: yellow;
}

.navbar-collapse {
  background: green;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>

<!-- Navigation Bar -->
<div class="navbar navbar-default" id="navbar-outer">
  <div class="container-fluid" style="margin:0px;">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="../images/LOL_LOGO_NEW-01.png" />
      </a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
        <span class=" glyphicon glyphicon-menu-hamburger"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="menu">
      <ul class="navbar navbar-nav" id="navbar-menu">
        <li><a href="#">WHAT WE DO</a></li>
        <li><a href="#">WHO WE ARE</a></li>
        <li><a href="#">OUR WORK</a></li>
        <li><a href="#">VENTURES</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">CONNECT</a></li>
      </ul>
    </div>
  </div>

＆＃13;

在调整窗口大小时如何避免徽标更改位置？

1 个答案: