Twitter bootstrap 响应引导问题-移动站点

我正在使用Bootstrap开发一个移动网站

目前，我有一个标题，在屏幕左侧有公司徽标，在右侧有3个导航按钮

如果徽标和导航按钮无法在屏幕上显示，我会尝试使所有内容都能相应地调整大小

徽标的大小调整得很好，但如果屏幕太小，3个导航按钮将换行

我如何防止这种情况，使他们的大小一样的标志。我不确定我做错了什么

请参阅下面的代码

CSS:

HTML:

演示：

需要一个宽度，您还需要使用网格系统的结构来防止额外的填充

==HTML==

---

徽标图像的尺寸是多少？@Skelly 150 x 29px-这与徽标图像的尺寸有关吗？行在哪里？不能使用周围没有.row的列，也不能有额外填充的问题，请删除那些内联样式并使用.row，这样它也会被清除。

  #topNavButtons
  {
      margin: 0px;
      padding: 0px;
      list-style-type: none;
      float: right;
  }

  #topNavButtons li
  {
      background-color: transparent;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 4px;
      float: left;
      padding: 0px 2px;
      position: relative;
  }

    <nav>
        <div class="col-xs-6" style="padding-left: 0px; padding-right: 0px;">
            <a href="#">
                <img style="padding: 10px;" class="img-responsive" src="logo.png" />
            </a>
        </div>
        <div class="col-xs-6" style="padding: 0px">
            <ul id="topNavButtons">
                <li style="background: red"><a href="#"><img class="img-responsive" style="display: inline-block" src="navButton1.png" /></a></li>
                <li style="background: green"><a href="#"><img class="img-responsive" style="display: inline-block" src="navButton2.png" /></a></li>
                <li style="background: blue"><a href="#"><img class="img-responsive" style="display: inline-block" src="navButton3.png" /></a></li>
            </ul>
        </div>
    </nav>

  <div class="col-xs-6 no-padding-right">
     <a href="#">
     <img class="img-responsive" src="http://placehold.it/150x29/000000/FFFFFF&text=LOGO" />
     </a>
  </div>

  <div class="col-xs-6">
     <ul id="topNavButtons">
        <li><a href="#">
           <img class="img-responsive" src="http://placehold.it/50x29/ba0404/FFFFFF&text=1" /></a>
        </li>
        <li><a href="#">
           <img class="img-responsive" src="http://placehold.it/50x29/0474ba/FFFFFF&text=2" /></a>
        </li>
        <li><a href="#">
           <img class="img-responsive" src="http://placehold.it/50x29/5b7c13/FFFFFF&text=3" /></a>
        </li>
     </ul>
  </div>

topNavButtons {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    text-align: right;
    white-space: nowrap;
    font-size: 0px;
}
.no-padding-right {
    padding-right: 0
}
#topNavButtons li {
    display: inline-block;
    padding: 0px 2px;
    margin: 0 0 0 2px;
    width:33.333%; /* whether floated inline-block or whatever you need a width to scale down as the viewport sizes */
    max-width:50px;
}
#topNavButtons li img {
    margin:0 0 0 auto;
}