Responsive Bootstrap Issue - Mobile Site

我使用Bootstrap開發移動網站。Responsive Bootstrap Issue - Mobile Site

目前，我有一個標題，其特點是屏幕左側的公司徽標和右側的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>

來源

2014-10-03 Richy

什麼是標誌圖像的尺寸？ – ZimSystem 2014-10-03 13:42:13

@Skelly 150 x 29px - 這與徽標圖像的尺寸有關嗎？ – Richy 2014-10-03 16:00:21

.row在哪裏？不能使用不帶.row的列而不使用額外填充，刪除這些內聯樣式並使用.row，因此它也會清除。 – Christina 2014-10-03 17:02:04

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

來源

2014-10-03 17:18:44 Christina

Responsive Bootstrap Issue - Mobile Site

回答

相關問題