我假装让第一列固定,但是当我添加 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>
据我了解,您的侧边栏在移动设备上消失了,对吗?
您是否尝试过从 aside 元素中删除 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>
我是一名优秀的程序员,十分优秀!