Question

现在玩我的导航菜单大小了一段时间，刚开始用jsFiddle做一个例子。没有任何图像，没有完美的工作。所以我添加了一个示例徽标，当屏幕宽度减小时，菜单会分割。

我该如何预防？ 请注意，每个小提琴都会折叠菜单屏幕。放大窗口的宽度以查看问题

带徽标图像的代码

<div class="nav navbar navbar-default navbar-fixed-top">
  <!---->
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!--                    <div class="thumbnail_container">
                                          <div class="thumbnail">-->
      <a class="navbar-brand hidden-xs" href="#">
        <img id='logo-white' class='img-responsive resize logo-white' src='https://www.google.ca/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png' alt='Company Logo' />
      </a>

      <!--                        </div>
                                      </div>-->

      <!--</div>-->
    </div>
    <div class='navbar-header'>
    </div>
    <div class="collapse navbar-collapse " id="myNavbar">
      <!--<ul class="nav navbar-nav navbar-left">-->

      <div class="menu-header-container">
        <ul id="menu-header" class="nav navbar-nav navbar-left">
          <li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-95 current_page_item menu-item-113"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Teacher</span></a></li>
          <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Administrator</span></a></li>
          <li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Parent</span></a></li>
          <li id="menu-item-114" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-114"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Blog</span></a></li>
          <li id="menu-item-115" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-115"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Sign In</span></a></li>
        </ul>
      </div>
      <!--<div class="free-trial-header">-->
      <a class="btn btn-primary btn-large free-trial-header" href="#"> Free Trial</a>
      <!--<button type="button" class="btn btn-primary btn-large free-trial-header ft">Free Trial</button>-->

      <!--onclick="location.href='http://google.com';"-->
      <!--</div>-->
      <!--</ul>-->
      <div class="navbar-right center-block">
        <!--                      nav navbar-nav -->


        <div class="menu-country-container">
          <div class="dropdown">
            <button class="btn btn-nav dropdown-toggle" type="button" data-toggle="dropdown" id="region-btn">Canada
              <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li data-value="en-ca"><img width="24" height="12" src="http://localhost/test/wp-content/uploads/2016/12/canada-24x12.png" class="menu-image " alt="Canada" srcset="http://localhost/test/wp-content/uploads/2016/12/canada-24x12.png 24w, http://localhost/test/wp-content/uploads/2016/12/canada-36x18.png 36w, http://localhost/test/wp-content/uploads/2016/12/canada.png 48w"
                sizes="(max-width: 24px) 100vw, 24px" /></li>
              <li data-value="en-us"><img width="24" height="13" src="http://localhost/test/wp-content/uploads/2016/12/usa-24x13.png" class="menu-image " alt="USA" srcset="http://localhost/test/wp-content/uploads/2016/12/usa-24x13.png 24w, http://localhost/test/wp-content/uploads/2016/12/usa-36x19.png 36w, http://localhost/test/wp-content/uploads/2016/12/usa.png 48w"
                sizes="(max-width: 24px) 100vw, 24px" /></li>
            </ul>
          </div>
        </div>

        <input hidden="true" id="language" value="en-CA">
        </label>


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

当这种分裂发生时，当它们之间仍有足够的空间时，右边的两个项目放在第二行。

Answer 1

嗯，每个人都没有空间..如果你真的想要2个按钮正确地成为菜单的一部分，你应该将它们作为列表项放入<ul>。

主要是随着宽度变小而使徽标缩小尺寸，并且不要让它溢出 - bootstrap不会为你做这件事：

 .navbar-brand {
   height: auto;
   padding-bottom: 5px;
 } 
 @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-brand .logo-white {
     height: 40px
   }
 }

如何在公司图像存在时阻止导航菜单中断

1 个答案: