2017-02-11 71 views
0

我有以下問題。假設我有以下的導航欄結構從docsBootstrap基於屏幕分辨率顯示各種鏈接集

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Brand</a> 
    </div> 

<!-- Collect the nav links, forms, and other content for toggling --> 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
    <li><a href="#">Link</a></li> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">One more separated link</a></li> 
     </ul> 
    </li> 
    </ul> 
    <form class="navbar-form navbar-left"> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Search"> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
    <ul class="nav navbar-nav navbar-right"> 
    <li><a href="#">Link</a></li> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
     </ul> 
    </li> 
    </ul> 
</div><!-- /.navbar-collapse --> 

它工作正常,但我也需要在移動顯示不同的一組鏈接時,導航欄已展開。 到目前爲止,我嘗試了以下幾種方式: 1.創建單獨的navbar-collapse div,其中包含我想要顯示的確切內容,並且僅給予"bs-example-navbar-collapse-1"才能在移動設備上顯示div(大屏幕div也爲navbar-collapse,但沒有此ID,坍塌)。它可以工作,但是div與"bs-example-navbar-collapse-1"之間的鏈接也顯示在大屏幕上(它們僅在移動設備上顯示)。 2.使用hidden-lg-*類。它的工作原理,但據我瞭解,它仍然出現在屏幕上,但display: none這不是我想要的,即我想爲普通和移動屏幕只有兩個單獨的集。

我將不勝感激任何關於此主題的幫助和想法。

回答

0

使用可見光XS類顯示在移動設備上的div。

使用hidden-xs類不能在移動設備上顯示div。

這裏是例子。希望這會有所幫助。

<!DOCTYPE HTML> 
<html> 
<head> 
<title>DDDD</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="keywords" content="" /> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> 
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<style> 
</style> 
</head> 
<body> 
    <nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Brand</a> 
    </div> 

<!-- Collect the nav links, forms, and other content for toggling --> 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
    <li><a href="#">Link</a></li> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">One more separated link</a></li> 
     </ul> 
    </li> 
    </ul> 
    <form class="navbar-form navbar-left"> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Search"> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
    <ul class="nav navbar-nav navbar-right"> 
    <li><a href="#">Link</a></li> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
     </ul> 
    </li> 
    </ul> 
</div><!-- /.navbar-collapse --> 
<footer> 
    <h2 class="text-center">This is footer</h2> 
    <div id="top-fotter"> 
     <div class="container"> 
      <div class="col-sm-3 box-foot"> 
       <h4 class="foot-hd">Example <a data-target=".bottom-menu1" data-toggle="collapse" class="visible-xs pull-right fa fa-angle-down" type=""></a></h4> 
        <div id="bs-example-navbar-collapse-4" class="bottom-menu1 navbar-collapse collapse" role="navigation" aria-expanded="true" style=""> 
        <ol class="bottom-menu"> 
         <li><a href="#">30 napos áruvisszaküldési jog</a></li> 
         <li><a href="#">Termék javítása, a Pick-up &amp; Return szolgáltatás</a></li>   
         <li><a href="#">Nézzen bele a dobozba fizetés előtt!</a></li>   
        </ol> 
        </div> 
      </div><!--col-sm-3 close--> 
      <div class="col-sm-3 box-foot"> 
       <h4 class="foot-hd">Example2 <a data-target=".bottom-menu2" data-toggle="collapse" class="visible-xs pull-right fa fa-angle-down" type=""></a></h4> 
       <div id="bs-example-navbar-collapse-4" class="bottom-menu2 navbar-collapse collapse" role="navigation" aria-expanded="true" style=""> 
        <ol class="bottom-menu"> 
         <li><a href="#">Felhasználói fiók</a></li> 
         <li><a href="#">Hogyan rendelhetek online?</a></li>   
         <li><a href="#">Szállítással kapcsolatos részletek</a></li> 
         <li><a href="#">Gyakran ismételt kérdések</a></li>      
        </ol> 
       </div> 
      </div><!--col-sm-3 close--> 
      <div class="col-sm-3 box-foot"> 
       <h4 class="foot-hd">Example3 <a data-target=".bottom-menu3" data-toggle="collapse" class="visible-xs pull-right fa fa-angle-down" type=""></a></h4> 
       <div id="bs-example-navbar-collapse-4" class="bottom-menu3 navbar-collapse collapse" role="navigation" aria-expanded="true" style=""> 
        <ol class="bottom-menu"> 
         <li><a href="#">Termék garanciális javítása űrlap</a></li> 
         <li><a href="#">Termék-visszaküldési űrlap</a></li>   
         <li><a href="#">Panaszok &amp; észrevételek űrlap</a></li>   
        </ol> 
       </div> 
      </div><!--col-sm-3 close--> 
      <div class="col-sm-3 box-foot"> 
       <h4 class="foot-hd">IExample4 <a data-target=".bottom-menu4" data-toggle="collapse" class="visible-xs pull-right fa fa-angle-down" type=""></a></h4> 
       <div id="bs-example-navbar-collapse-4" class="bottom-menu4 navbar-collapse collapse" role="navigation" aria-expanded="true" style=""> 
        <ol class="bottom-menu"> 
         <li><a href="#">Általános felhasználási feltételek</a></li> 
         <li><a href="#">Személyi adatok védelme</a></li> 
         <li><a href="#">Cookiek (sütik) használatának szabályzata</a></li>   
         <li><a href="#">Hírlevél feliratkozás</a></li>   
        </ol> 
       </div> 
      </div><!--col-sm-3 close--> 
     </div><!--container close---> 
    </div> 

</footer> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script> 

</body> 
</html> 

添加這個CSS:=====================================

footer { 
    border-top: 1px solid #ccc; 
    box-shadow: 1px 1px 3px #000; 
    margin-top:45px; 
    padding: 30px 0 0; 
} 
.bottom-menu{margin:0; padding:0;} 
.bottom-menu li{list-style:none; margin-bottom:15px; line-height:15px;} 
.bottom-menu li a{color:#4a7e07; font-size:14px; line-height:18px;} 
#footer-btm{background:#593896; padding:8px 0;} 
.foot-hd { 
    padding: 0 15px; 
} 
#top-fotter .col-sm-3{margin-bottom:10px;} 
.foot-hd a {cursor: pointer; background: red; padding: 0px 5px; color: #fff;} 
+0

感謝您的好評,我的問題通過向.collapse.navbar-collapse添加.col-sm-3和.visible-xs解決。 –

+0

幫助我呢!謝謝 –

0
<ul class="dropdown-menu"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li role="separator" class="divider hidden-xs"></li> 
    <li class="hidden-xs"><a href="#">Separated link</a></li> 
    <li class="hidden-lg" role="separator" class="divider "></li> 
    <li class="hidden-lg"><a href="#">One more separated link</a></li> 
    </ul> 

我認爲2個分離另外一類移動設備和桌面