Как отменить is_mobile во вложенном элементе в bulma? - PullRequest
Новая
       17

Как отменить is_mobile во вложенном элементе в bulma?

0 голосов
/ 09 апреля 2019 
<div class="level is-mobile name_logo">
    <div class="level-left">
        <div class="level-item has-text-centered">
            <p class="heading">Example 1</p>
            <p class="is-size-5 has-text-weight-bold title">Example 2</p>
        </div>
    </div>

В этом примере я использую класс is-mobile, чтобы заставить классы принудительно отображаться в строке. Проблема в том, что вы заставляете отображать строки <p class="heading"> и <p class="title"> в строке. Даже не используя тег <br> У меня есть успех, чтобы отобразить эти два <p> в столбце. Я могу что-нибудь сделать?

1 Ответ

0 голосов
/ 13 мая 2019

Вы пытаетесь сделать что-то вроде примера Mobile Level на документах Bulma? https://bulma.io/documentation/layout/level/#mobile-level

.level-item установлен на display:flex, что позволяет отображать элементы уровня в строках. В примере, представленном в документации Bulma, есть дополнительная div упаковка элементов .heading и .title. Добавьте этот дополнительный div и текст отобразится в две строки. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>
<div class="level is-mobile name_logo">
    <div class="level-left">
        <div class="level-item has-text-centered">
          <div>
            <p class="heading">Example 1</p>
            <p class="is-size-5 has-text-weight-bold title">Example 2</p>
          </div>
        </div>
    </div>
</div>
...