我假装修复第一列,但是当我添加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>
```
据我所知,你的侧边栏在手机上消失了吧?
你有没有尝试从旁边的元素中删除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>