2017-05-26 60 views
0

我要實現HTML佈局是這樣的,使用Twitter的引導自定義菜單中包含的語言和菜單,引導

我希望它是反應靈敏,在這兩種模式下,桌面和移動,像下面的例子

桌面模式

desktop

移動模式

MOBILE

這是代碼我試過到目前爲止

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
\t <header > 
 
\t \t \t <div id="navbar-main"> 
 
\t \t \t <!-- Fixed navbar --> 
 
\t \t \t <div class="navbar navbar-inverse navbar-fixed-top navbar-custom"> 
 
\t \t \t \t <div class="container-fluid"> 
 
\t \t \t \t \t \t <div class="navbar-header"> 
 
\t \t \t \t \t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
\t \t \t \t \t \t \t <span class="sr-only"></span> 
 
\t \t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t \t \t </button> 
 
\t \t \t \t \t \t \t <a class="navbar-brand" href="#"> 
 
\t \t \t \t \t \t \t <img src="https://i.stack.imgur.com/G2Xgp.png"> 
 
\t \t \t \t \t \t \t </a> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="navbar-collapse collapse navbar-right"> 
 
\t \t \t \t \t \t \t <ul class="nav navbar-nav navbar-right"> 
 
\t \t \t \t \t \t \t \t \t <li ><a href='#'>FR</a></li> 
 
\t \t \t \t \t \t \t \t \t <li ><a href='#'>EN</a></li> 
 
\t \t \t \t \t \t \t \t \t <li ><a href='#'>KR</a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <!--/.nav-collapse --> 
 
\t \t \t \t \t \t <ul class="nav navbar-nav navbar-right"> 
 
\t \t \t \t \t \t \t <ul class="nav navbar-nav navbar-right" role="menu"> 
 
\t \t \t \t \t \t \t \t \t <li><a href='#' >HOME</a></li> 
 
\t \t \t \t \t \t \t \t \t <li><a href='#' >ABOUT US</a></li> 
 
\t \t \t \t \t \t \t \t \t <li><a href='#' >TEST</a></li> 
 
\t \t \t \t \t \t \t \t \t <li><a href='#' >TEST</a></li> 
 
\t \t \t \t \t \t \t \t \t <li><a href='#' >TEST</a></li> 
 
\t \t \t \t \t \t \t \t \t <li><a href='#' >TEST</a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t </header> 
 
</body> 
 
</html>

任何幫助表示讚賞

回答

0

看來你正在使用100%的徽標大小。

最簡單的方法可以將css max-width屬性添加到徽標。例如:

.navbar-brand img{ 
    max-width: 100px; 
} 

它會作出響應,因爲徽標將被分配最大寬度的屬性,使徽標可伸縮。

您可以根據您認爲最適合您的設計的寬度來製作寬度。