Question

我需要3个项目才能仅在xs屏幕的下拉按钮中可见。请查看代码并帮助我。这是网页的链接：https://krishna2l.github.io/coursera-test/mod3_solution/

    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" 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>
      </div>

    <div id="collapsable-nav" class="collapse navbar-collapse">
    <ul id="nav-list" class="nav navbar-nav visible-xs">
    <li>
        <a href="#">Home</a></li>
    <li>
        <a hef="#">About</a>
    </li>
    <li>
        <a href="#">Help</a>
     </li></ul> 
    </div></div></nav>

Answer 1

要隐藏元素，只需使用.d-none类或.d- {sm，md，lg，xl} -none类中的任何一个，即可响应任何屏幕变化。

要仅在给定的屏幕尺寸间隔上显示元素，可以将一个.d- -none类与.d--*类（例如.d-none .d- md-block .d-xl-none将隐藏所有屏幕尺寸的元素，但中型和大型设备除外。

查看其官方文档： https://getbootstrap.com/docs/4.5/utilities/display/

仅在xs屏幕的下拉按钮中显示项目

1 个答案: