引导程序根据屏幕分辨率显示各种链接集

Question

I have following problem. 我有以下问题。 Let's assume I have the following navbar structure from the docs : 假设我在docs中具有以下导航栏结构：

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

It works fine but I need to show different set links on mobile when navbar is collapsed. 它工作正常，但是当导航栏折叠时，我需要在移动设备上显示不同的设置链接。 So far I tried these ways: 1. Create separate navbar-collapse divs with exact content I want to show and give a "bs-example-navbar-collapse-1" only to div supossed to be shown on mobile (div for large screens also navbar-collapse but without this id so it doesn't collapse). 到目前为止，我已经尝试了以下方法：1.使用要显示的确切内容创建单独的navbar-collapse div，并仅给假定在移动设备上显示的div提供一个"bs-example-navbar-collapse-1" （适用于大屏幕的div也有navbar-collapse但没有此ID，因此不会崩溃）。 It works, but the links from div with "bs-example-navbar-collapse-1" are also shown on large screens (they supossed to be shown only on mobile). 它可以工作，但是div中带有"bs-example-navbar-collapse-1"的链接也会显示在大屏幕上（假设只能在移动设备上显示）。 2. Use hidden-lg-* class. 2.使用hidden-lg-*类。 It works, but as I understand it still appears on the screen but with display: none which is not what I want, ie I want to just have two separate sets for regular and mobile screens. 它可以工作，但是据我了解，它仍然出现在屏幕上但带有display: none ，这不是我想要的，即我只想为常规和移动屏幕设置两个单独的集合。

I would appreciate any help and thought on this topic. 对于这个主题的任何帮助和思考，我将不胜感激。

Answer 1

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

i thinks two separator alternative class mobile device and desktop 我认为两个分隔符替代类移动设备和台式机

Answer 2

Use the visible-xs class to show the divs on mobile. 使用visible-xs类在移动设备上显示div。

Use hidden-xs class not to display the divs on mobile. 使用hidden-xs类不在移动设备上显示div。

And here is example . 这是例子。 hope this will help. 希望这会有所帮助。

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

Add this CSS:===================================== 添加此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;}

引导程序根据屏幕分辨率显示各种链接集

问题描述

2 个解决方案

解决方案1
0 2017-02-11 04:51:59

解决方案2
0 已采纳 2017-02-11 05:18:54

引导程序根据屏幕分辨率显示各种链接集

问题描述

2 个解决方案

解决方案1 0 2017-02-11 04:51:59

解决方案2 0 已采纳 2017-02-11 05:18:54

解决方案1
0 2017-02-11 04:51:59

解决方案2
0 已采纳 2017-02-11 05:18:54