html - bool 玛固定柱

Question

我假装使第一列固定，但当我添加 position:fixed 时，列彼此重叠，如何解决此问题？

如果不可能，我想知道一个可以给我提供的示例

侧面导航栏已修复并通过 bulma 进行响应

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><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>    
```</code></pre>
</div>
</div>

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>