Фиксированная колонна с булмой - PullRequest
Новая
       21

Фиксированная колонна с булмой

0 голосов
/ 24 марта 2019

я притворяюсь, что этот первый столбец исправлен, но когда я добавляю position:fixed, столбцы перекрывают друг друга, как это исправить?

Если это невозможно, я хочучтобы узнать образец, который дает мне

боковую навигационную панель, исправленную и реагирующую с булмой 


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

1 Ответ

1 голос
/ 25 марта 2019

Как я понял, ваша боковая панель исчезает на мобильном телефоне, верно?
Вы пытались удалить класс 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>
...