Question

我正在使用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>

Answer 1

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

响应式Bootstrap问题 - 移动站点

1 个答案: