Bulma - 在桌面上强制导航栏垂直答案

【问题标题】：Bulma - force navbar vertical on desktopBulma - 在桌面上强制导航栏垂直
【发布时间】：2020-02-24 22:29:13
【问题描述】：

我想通过 bulma 创建一个关注体育运动（棒球、篮球......网球、摔跤）的网站，但是当我走到最后（按字母顺序是摔跤）时，项目太多（从左到右水平）导航栏在桌面上正确显示。所以我想我可以使用菜单（垂直导航），但它不会在移动设备上给我一个汉堡包图标或任何类似的东西。我使用了菜单示例found here。我想通过媒体查询在移动设备上使用导航栏，在桌面上使用菜单，类似于

/** mobile **/
@media (max-width: 768px) {

      .menu {
       display: none;
      }
}

/** desktop **/
@media (min-width: 1024px) and (max-width: 1215px) {

    .navbar {
     display: none;
    }
}

但这仍然给我留下了两个单独的组件和链接、图标等列表。有没有办法强制 bulma 导航栏一直保持垂直？这样我就可以只使用一个组件而不是两个...

【问题讨论】：

标签： html css navigation bulma

【解决方案1】：

我和你有同样的问题。我想要一个可以用作主菜单的侧边栏，在响应模式下显示时带有一个汉堡包。

所以我覆盖了 Bulma 中的组件（即侧边菜单）：

我使用的是 SASS 版本的 Bulma
我在 Bulma 构建中添加了一个 extensions 文件夹
我在其中添加了我的 improved_sidebar.sass 文件

这是我的代码，可能对你有帮助：

// ––––––––––––––––––––––––––––––––––––––––––––––––––
// Aside improvements
// ––––––––––––––––––––––––––––––––––––––––––––––––––
$aside-width: 250px
$aside-right-padding: 30px
$aside-delta: $aside-width - $aside-right-padding
aside
    display: block
    box-sizing: border-box
    position: fixed
    top: 0
    left: 0
    max-width: $aside-width
    height: 100%
    padding:
        top: 10px
        bottom: 10px
        left: 10px
        right: $aside-right-padding
    overflow-y: auto

    // Initially hidden in mobile mode. Needs to be flagged as "is-active" to be shown
    // It will appear OVER the page content
    +touch
        left: -$aside-delta

        &.is-active
            left: 0
            z-index: 900



// ––––––––––––––––––––––––––––––––––––––––––––––––––
// Clickable burger in mobile mode
// ––––––––––––––––––––––––––––––––––––––––––––––––––
$burger-dimensions: 25px
#aside-burger
    display: none

    +touch
        position: absolute
        display: block
        top: calc(50% - calc(#{$burger-dimensions} / 2))
        right: calc(calc(#{$aside-right-padding} - #{$burger-dimensions}) / 2)
        width: $burger-dimensions
        height: $burger-dimensions
        color: white

    i
        position: relative
        z-index: 1000
        font-size: 40px !important
        cursor: pointer

        &:hover
            color: $info

        &:active
            color: $danger


// Rotate the icon when the sidebar is toggled
aside.is-active
    i
        transform: rotate(180deg)


// ––––––––––––––––––––––––––––––––––––––––––––––––––
// Utilities
// ––––––––––––––––––––––––––––––––––––––––––––––––––
// The sidebar is natively visible only in desktop
// Therefore we move tagged items to the right, of the same amount
.adjust-with-sidebar
    +touch
        margin-left: $aside-right-padding

    +desktop
        margin-left: $aside-width

这是我的 HTML 模板（我使用 jinja2 和 vuejs 进行模板）：

{% load static %}

<aside class="menu" :class="{'is-active': activeSidebar}">
    <div id="aside-burger" @click="activeSidebar = !activeSidebar">
        <span class="icon" >
            <i class="fas fa-caret-right"></i>
        </span>
    </div>
    <figure class="image has-text-centered">
        <a href="{% url 'home' %}">
            <img id="menu-logo" src="/media/core/logo.png" alt="Logo">
        </a>
    </figure>
    <p class="menu-label">Exemples</p>
    <ul class="menu-list">
        <li><a id="example" href="{% url 'example' %}">API Exemple</a></li>
    </ul>
    <p class="menu-label">Mon Compte</p>
    <ul class="menu-list">
        <li><a id="account-info" href="{% url 'user_account' %}">Mes informations</a></li>
        <li><a id="logout" @click.prevent="submitLogoutForm">Déconnexion</a></li>
    </ul>
</aside>

【讨论】：

【解决方案2】：

我认为您可以强制导航栏垂直而不是使用菜单栏，因为 Bulma 中的菜单栏是垂直的，并且实际上不会随汉堡扩展或压缩（导航栏使用汉堡）。因此，请查看W3Schools 的这篇文章，其中他们谈到了使用 CSS 强制导航栏垂直。此外，当您使用导航栏汉堡打开布尔玛的导航栏时，它们会覆盖整个屏幕。这是 Bulma 的一个特性，所以我不确定你是否想要那样 - 你可能需要在这里和那里调整一些 CSS。

【讨论】：