Question

阅读此https://getbootstrap.com/docs/4.1/migration/#utilities文档我尝试在Bootsrap 4.1应用程序中仅在小型和超小型设备上显示“切换边栏”按钮，

    <div class="d-md-none d-lg-none d-xl-none ">
        <nav class="navbar navbar-expand-lg navbar-light bg-light   ">
            <div class="container-fluid">
                <button type="button" id="sidebarCollapse" class="btn btn-info">
                    <i class="fa fa-align-left" style="color: white"></i>
                    <span>Toggle Sidebar</span>
                </button>
            </div>
        </nav>
    </div>

    @yield('content')
</div>

但是它不适用于小型设备：它不可见，在所有其他设备上均按预期工作我试图添加d-sm-block类：

    <div class="d-sm-block d-md-none d-lg-none d-xl-none ">

但是它仍然无法工作...

哪种方法是正确的？

Answer 1

您可以将d-none添加到隐藏在xl和d-sm-block中此代码仅在sm屏幕上显示按钮

<div class="d-md-none d-lg-none d-none d-sm-block ">
    <nav class="navbar navbar-expand-lg navbar-light bg-light   ">
        <div class="container-fluid">
            <button type="button" id="sidebarCollapse" class="btn btn-info">
                <i class="fa fa-align-left" style="color: white"></i>
                <span>Toggle Sidebar</span>
            </button>
        </div>
    </nav>
</div>

如果需要在小号和小号上显示它，可以写

<div class="d-md-none d-lg-none d-sm-block ">
    <nav class="navbar navbar-expand-lg navbar-light bg-light   ">
        <div class="container-fluid">
            <button type="button" id="sidebarCollapse" class="btn btn-info">
                <i class="fa fa-align-left" style="color: white"></i>
                <span>Toggle Sidebar</span>
            </button>
        </div>
    </nav>
</div>

为什么在小型设备上看不到“切换边栏”按钮

1 个答案: