Question

我正在使用bootstrap响应实用程序来显示和隐藏li 对于xs sm和md，首先要隐藏，lg和xl首先应该看到，但这不起作用。目前在所有设备中均可见。

我的代码在

下面

<ul>
  <!-- For non mobile device it should be visible-->
  <li class="hidden-md-down">
    <a href="friends">
      <i class="fa fa-user-plus"></i>
    </a>
  </li>
  <!-- For mobile device it should be visible-->
  <li class="hidden-lg-up">
    <a href="mobilefriends">
      <i class="fa fa-user-plus"></i>
    </a>
  </li>
</ul>

如何让它运作？

Answer 1

由于您使用twitter-bootstrap-3标记了问题，因此您可以使用bootstrap 3 responsive utilities。例如：

<ul>
  <li class="hidden-md">Mobile</li>
  <li class="hidden-xs hidden-sm">Desktop</li>
</ul>

DEMO

如果您使用bootstrap-v4-alpha，您当然可以使用.hidden-md-down之类的<ul> <li class="hidden-md-up">Mobile</li> <li class="hidden-sm-down">Desktop</li> </ul>，这应该可以正常使用：

if 'test' in sys.argv:
    REST_FRAMEWORK['PAGE_SIZE'] = 10

new responsive utilities

Answer 2

您的代码是Bootstrap v4-alpha。版本。所以首先确认它你使用的是什么版本？你可以启动Quick Bootstrap v4-alpha。 BY CDN LINK .. 只需添加这两个链接。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" ></script>

另外，如果你想使用Bootstrap 3。你需要使用

hidden-xs仅限桌面视图

hidden-sm hidden-md hidden-lg 仅适用于移动设备视图

显示li基于设备不工作

2 个答案: