html - 存在公司形象时如何防止导航菜单崩溃

Question

我的导航菜单的大小已经有一段时间了，刚开始使用 jsFiddle 制作它的示例。没有任何图像就完成了，这该死的东西完美无缺。所以我添加了一个示例 Logo ，当屏幕宽度减小时，菜单会拆分。

我该如何防止这种情况发生？ 注意每个 fiddle 都有折叠的菜单屏幕。放大窗口宽度查看问题

Fiddle With Logo Image

Fiddle without Logo Image

带有 Logo 图像的代码

<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
   }
 }