Bootstrap 4隐藏元素基于屏幕大小

Question

我有桌面和平板电脑的主菜单，但我希望当用户进入移动视图时，该菜单中的链接会发生变化。不确定从哪里开始。这是我在header.php文件中为桌面版本的Bootstrap菜单所做的：

<div class="container">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="<?php bloginfo( 'url' ); ?>"<?php bloginfo( 'name' ); ?>><img src="<?php bloginfo('template_directory');?>/img/snaglogo.png" /></a>
</div>
<div class="collapse navbar-collapse">


<?php
    $args = array(
          'menu'         => 'header-menu',
          'menu_class'   =>'nav navbar-nav navbar-right',
          'container'    =>'false'
          );
            wp_nav_menu( $args );

 ?>

</div><!--/.nav-collapse -->

我是否会为手机添加另一件？不太确定。

Answer 1

我建议使用bootstrap类在导航栏上输入：

<div class="hidden-xs hidden-sm">

然后使用类创建一个单独的移动导航栏：

<div class="visible-xs visible-sm hidden-md hidden-lg">

这样您就可以将链接设置为完全不同的链接，而不会以不利的方式影响导航栏。

以下是有关“隐藏”和“可见”类的更多信息：

http://getbootstrap.com/css/#responsive-utilities-classes

Answer 2

对于那些希望将手机屏幕（带按钮的屏幕）和普通酒吧分开的人，请使用以下课程：

基于按钮的菜单：

<div class="hidden-xs">

常规菜单栏：

<div class="visible-xs hidden-sm hidden-md hidden-lg">

Answer 3

Bootstrap 4提供了用于隐藏或添加特定断点菜单项的实用程序。就我而言，我必须在移动视图中添加一些菜单项，这些菜单项是桌面视图（在移动视图中消失）的辅助导航的一部分。因此，仅在lg断点以下的屏幕上添加菜单项，请添加d-lg-none类（示例使用React语法）：

<li className="nav-item d-lg-none">
   <Link to="/dashboard" className="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show">
      Dashboard
   </Link>
</li>

更多信息可以在这里找到：https://getbootstrap.com/docs/4.0/utilities/display/

Answer 4

Bootstrap 4隐藏元素基于屏幕大小

.hidden- *类（Bootstrap 4 Alpha）和.visible-*（Bootstrap 3）被删除。

您需要使用显示属性，主要是d- -none（隐藏）和d- -block或d-*-inline-block（显示）。

如果您希望元素隐藏在sm或以下的大小，但在md，lg和xl上可见，请使用d-none d-md-block。

if (GetSenderSMTPAddress(mailItem) != null) // secondary or additional mailbox
{
    sendingAddress = GetSenderSMTPAddress(mailItem);
}
else //primary mailbox
{
    sendingAddress = mailItem.SendUsingAccount.SmtpAddress;
}

d-none d-sm-block隐藏秀秀秀秀秀 d-none d-md-block隐藏隐藏显示显示显示 d-none d-lg-block隐藏隐藏隐藏隐藏显示显示 d-none d-xl-block隐藏隐藏隐藏隐藏隐藏显示 d-block d-xl-none show show show show hide d-block d-lg-none显示显示显示隐藏隐藏 d块d-md-无显示显示隐藏隐藏隐藏 d-block d-sm-none显示隐藏隐藏隐藏隐藏

enter link description here

如何在WordPress中为我的引导程序主题的移动版本添加不同的菜单？

4 个答案:

Bootstrap 4隐藏元素基于屏幕大小