个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 04:21:52 25 4
gpt4 key购买 nike

我有以下问题。假设我有来自 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 supossed to show在移动设备上(大屏幕的 div 也 navbar-collapse 但没有这个 id 所以它不会折叠)。它有效，但来自带有 "bs-example-navbar-collapse-1" 的 div 的链接也显示在大屏幕上(它们应该只显示在移动设备上)。2. 使用hidden-lg-* 类。它有效，但据我所知，它仍然出现在屏幕上，但 display: none 这不是我想要的，即我只想为常规屏幕和移动屏幕设置两个独立的集合。

如果您对此主题有任何帮助和想法，我将不胜感激。

最佳答案

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

关于jquery - Bootstrap 根据屏幕分辨率显示各种链接集，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42171789/

25 4 0
文章推荐： javascript - 对正则表达式感到困惑
文章推荐： c++ - 当 stream.peek()= ='\n' 时，stream >> z1 有什么用
文章推荐： php - 使用 href 传递当前 GET 变量
文章推荐： c++ - 如何在cmake中添加链接器目录？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com