Question

我希望在正常显示中显示此文本，但在小显示中不可见。

<div class="topnav">
      <div id="top-links" class="nav-float-right">
       <ul class="list-inline">
        
        <li class="dropdown"><a href="{{ account }}" title="{{ text_account }}" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span><font size="2">{{ text_account }}</font></span> <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right">
            {% if logged %}
            <li><a href="{{ account }}">{{ text_account }}</a></li>
            <li><a href="{{ order }}">{{ text_order }}</a></li>
            <li><a href="{{ transaction }}">{{ text_transaction }}</a></li>
            <li><a href="{{ download }}">{{ text_download }}</a></li>
            <li><a href="{{ logout }}">{{ text_logout }}</a></li>
            {% else %}
            <li><a href="{{ register }}">{{ text_register }}</a></li>
            <li><a href="{{ login }}">{{ text_login }}</a></li>
            {% endif %}
          </ul>
        </li>
       </ul>
     </div>
      </div>

我在谷歌搜索解决方案并尝试了很多东西。但不成功。请让我知道如何解决这个问题。感谢

Answer 1

在你的CSS上写媒体查询 @media（max-width：780px）{ 。班级名称{ 显示：无 } } 或使用添加Bootstrap类（class =“hidden-xs”）...在移动屏幕上隐藏内容..

Answer 2

尝试使用像这样的媒体查询

@media screen and (max-width: 600px) {
  .topnav {
    display: none !important; 
  }
}

您可以将600px值更改为您要从

开始隐藏导航栏的宽度

Answer 3

你可以看看这个，因为它改变你的代码atonce这是供参考：

setlocal /?

看看它与navbar jsu一起工作的小提琴调整效果：https://jsfiddle.net/2aeupsq8/

代码执行此操作：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <title>click demo</title>

    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>




 <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

 <!-- jQuery library -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <!-- Latest compiled JavaScript -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>   
  </head>
  <body>
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <div class="container">
      <nav class="col-xs-4 col-sm-3">
        <ul class="list-unstyled">
        <li>Text 1</li>
        <li>Text 2</li>
        <li>Text 3</li>
        </ul>
    </nav>
    <nav class="col-xs-4 col-sm-3">
        <ul class="list-unstyled">
        <li>Text 4</li>
        <li>Text 5</li>
        <li>Text 6</li>
        </ul>
    </nav>
    <nav class="col-xs-4 col-sm-3">
        <ul class="list-unstyled">
        <li>Text 7</li>
        <li>Text 8</li>
        <li>Text 9</li>
        </ul>
    </nav>
    <nav class="hidden-xs col-sm-3">
        <ul class="list-unstyled">
        <li>Text 10</li>
        <li>Text 11</li>
        <li>Text 12</li>
        </ul>
    </nav></div>

  </body>
</html>

让screeen看到效果： https://jsfiddle.net/sugandhnikhil/ferowusa/

使一些文本（链接）在小显示器（移动）中不可见

3 个答案: