Css 当bulma navbar下拉列表位于navbar品牌部分时，如何修复该下拉列表_Css_Responsive_Bulma

Css 当bulma navbar下拉列表位于navbar品牌部分时，如何修复该下拉列表

css

Css 当bulma navbar下拉列表位于navbar品牌部分时，如何修复该下拉列表,css,responsive,bulma,Css,Responsive,Bulma,我正在使用bulma.io框架构建我的导航栏。我想在navbar品牌部分放置一个下拉列表，但当我这样做时，它会在较小的屏幕上失败（扩展navbar）。是否有方法允许在navbar品牌部分使用下拉菜单 <nav class="topmenu navbar is-fixed-top is-dark" role="navigation" aria-label="main navigation"> <div class=&qu

我正在使用bulma.io框架构建我的导航栏。我想在navbar品牌部分放置一个下拉列表，但当我这样做时，它会在较小的屏幕上失败（扩展navbar）。是否有方法允许在navbar品牌部分使用下拉菜单

<nav class="topmenu navbar is-fixed-top is-dark" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
    <!-- LOGO -->
    <div class="navbar-item has-dropdown is-hoverable">
        <a href="/index" class="navbar-link">
            MyCompany
        </a>
        <div class="navbar-dropdown is-boxed">
            <a class="navbar-item" href="/one">One</a>
            <a class="navbar-item" href="/two">Two</a>
            <a class="navbar-item" href="/three">Three</a>
        </div>
    </div>
    <a role="button" class="navbar-burger burger" data-target="topmenu" aria-label="menu" aria-expanded="false">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
    </a>
</div>
<div id="topmenu" class="navbar-menu">
    <div class="navbar-start">
        <a class="navbar-item" href="/start">Start</a>  
    </div>

    <div class="navbar-end">
        <a class="navbar-item" href="/end">End</a>
    </div>
</div>

显然，当屏幕变小时，bulma会从下拉列表中删除大部分样式。它仅将样式应用于

最小宽度：1024px

然后假定您希望在屏幕小于1024px时始终打开下拉列表

根据报告：

导航栏下拉列表在<1024px的触摸设备上可见，但在桌面上隐藏>=1024px

因此，您可以做的“允许在导航栏中下拉”，就是将相同的bulma样式也应用于小于1024px的屏幕。将此添加到css中，您将看到它解决了您的问题：

@media screen and (max-width:1023px) {
    .navbar-dropdown.is-boxed {
        border-radius: 6px;
        border-top: none;
        box-shadow: 0 8px 8px rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.1);
        display: block;
        opacity: 0;
        pointer-events: none;
        top: calc(100% + (-4px));
        transform: translateY(-5px);
        transition-duration: 86ms;
        transition-property: opacity,transform;
    }
    .navbar-dropdown {
        background-color: #fff;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        border-top: 2px solid #dbdbdb;
        box-shadow: 0 8px 8px rgba(10,10,10,.1);
        display: none;
        font-size: .875rem;
        left: 0;
        min-width: 100%;
        position: absolute;
        top: 100%;
        z-index: 20;
    }
}