Bootstrap 根据屏幕分辨率显示多组链接答案

【问题标题】：Bootstrap display various sets of links based on screen resolutionBootstrap 根据屏幕分辨率显示多组链接
【发布时间】：2017-02-11 03:16:42
【问题描述】：

我有以下问题。假设我有来自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 -->

它工作正常，但我需要在导航栏折叠时在移动设备上显示不同的设置链接。到目前为止，我尝试了这些方法： 1.创建单独的navbar-collapse div，其中包含我想要显示的确切内容，并仅将"bs-example-navbar-collapse-1" 分配给应该在移动设备上显示的div（大屏幕的div 也navbar-collapse，但没有此ID，因此它不会崩溃） .它可以工作，但带有"bs-example-navbar-collapse-1" 的 div 链接也显示在大屏幕上（它们应该只显示在移动设备上）。 2.使用hidden-lg-*类。它可以工作，但据我了解，它仍然出现在屏幕上，但 display: none 这不是我想要的，即我只想为常规屏幕和移动屏幕设置两个单独的集合。

我将不胜感激有关此主题的任何帮助和想法。

【问题讨论】：

标签： jquery css twitter-bootstrap anchor navbar

【解决方案1】：

使用 visible-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;}

【讨论】：

感谢您的出色回答，通过将 .col-sm-3 和 .visible-xs 添加到 .collapse.navbar-collapse 解决了我的问题。

【解决方案2】：

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

我认为两个分隔符替代类移动设备和桌面

【讨论】：