Question

我有以下问题。我们假设我有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也适用于大屏幕navbar-collapse但没有此ID它没有崩溃）。它有效，但div与"bs-example-navbar-collapse-1"的链接也显示在大屏幕上（它们只能在移动设备上显示）。 2.使用hidden-lg-*课程。它可以工作，但据我所知，它仍然出现在屏幕上但display: none并不是我想要的，即我想为常规和移动屏幕设置两个独立的设置。

我很感激有关这个主题的任何帮助和想法。

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>

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

Answer 2

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

Bootstrap根据屏幕分辨率显示各种链接

2 个答案: