Question

我假装使第一列固定，但是当我添加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>    
```

Answer 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>

布尔玛固定柱

1 个答案: