响应式引导问题 - 移动网站答案

【问题标题】：Responsive Bootstrap Issue - Mobile Site响应式引导问题 - 移动网站
【发布时间】：2014-11-28 09:19:03
【问题描述】：

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

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

如果徽标和导航按钮无法在屏幕上显示，我会尝试让所有内容响应式调整大小。

徽标大小调整正常，但如果屏幕太小，3 个导航按钮会换行。

如何防止这种情况发生，以便它们像徽标一样调整大小。我不确定我做错了什么。

参见下面的代码。

CSS：

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

HTML：

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

【问题讨论】：

标志图片的尺寸是多少？
@Skelly 150 x 29px - 与徽标图像的尺寸有关吗？
.row 在哪里？不能使用没有 .row 环绕的列并且没有额外填充的问题，删除那些内联样式并使用 .row 以便它也清除。

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

演示：http://jsbin.com/yelig/1/edit

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

== HTML ==

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

== CSS ==

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

【讨论】：