固定柱与布尔玛

问题描述 投票:0回答:1

我假装修复第一列,但是当我添加position:fixed时,列相互重叠,如何解决这个问题?

如果它不可能,我想知道一个给我一个样本

侧导航栏固定并响应于bulma


<section class="main-content columns is-fullheight">
    <aside class="column is-2 is-narrow-mobile is-fullheight section is-hidden-mobile">
        <p class="menu-label is-hidden-touch">Header</p>
        <ul class="menu-list">
            <li>
                <a href="#go-first" class="is-active">CIT</a>
                <ul><li><a href="#">Items</a></li><li><a href="#">Items</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="is-active">Other</a>
                <ul>
                    <li><a href="#">other</a></li>
                </ul>
            </li>
        </ul>
    </aside>

    <div class="container column is-10">
        <div class="section">
            <div class="card">
                <div class="card-header" id="go-first">
                    <p class="card-header-title">CIT</p>
                </div>
                <div class="card-content">
                    <div class="content">
                        header
                    </div>
                    <div class="columns">
                        <div class="column">
                            ...
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>    
```
html css navbar bulma
1个回答
1
投票

据我所知,你的侧边栏在手机上消失了吧? 你有没有尝试从旁边的元素中删除is-hidden-mobile类?

<section class="main-content columns is-fullheight">
<aside class="column is-2 is-narrow-mobile is-fullheight section">
    <p class="menu-label is-hidden-touch">Header</p>
    <ul class="menu-list">
        <li>
            <a href="#go-first" class="is-active">CIT</a>
            <ul><li><a href="#">Items</a></li><li><a href="#">Items</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="is-active">Other</a>
            <ul>
                <li><a href="#">other</a></li>
            </ul>
        </li>
    </ul>
</aside>
<div class="container column is-10">
    <div class="section">
        <div class="card">
            <div class="card-header" id="go-first">
                <p class="card-header-title">CIT</p>
            </div>
            <div class="card-content">
                <div class="content">
                    header
                </div>
                <div class="columns">
                    <div class="column">
                        ...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</section>
© www.soinside.com 2019 - 2024. All rights reserved.