Как можно выровнять содержимое по левому и правому краю в одном и том же горизонтальном положении в модальном нижнем колонтитуле Bulma? - PullRequest
Новая
       5

Как можно выровнять содержимое по левому и правому краю в одном и том же горизонтальном положении в модальном нижнем колонтитуле Bulma?

0 голосов
/ 31 октября 2018

У меня есть модальная карта в Булме, и я хочу, чтобы на одной стороне нижнего колонтитула располагался тег p по левому краю, а с другой стороны - тег p по правому краю, занимающий то же горизонтальное пространство. Стандартные классы, такие как уровень и столбцы, в нижнем колонтитуле работают неправильно. Я перепробовал много подходов, но это самый последний. 

    <footer class="modal-card-foot">
      <div id="site-type-div" class="columns is-inline-flex">
          <p id="chart-footer" class="level-item">Content</p>
          <p id="site-type-p" class="level-item">Type</p>
      </div>
    </footer>

Два тега p отображаются в одном и том же горизонтальном пространстве, но оба выровнены по левому краю; Я хочу, чтобы первый слева, а второй справа.

1 Ответ

0 голосов
/ 01 ноября 2018

Будет ли это работать? (кажется, класс modal-card-foot не очень хорошо работает с такими вещами, как уровень и столбцы) 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" /> 
    <footer class="">
      <div id="site-type-div" class="level is-mobile">
          <p id="chart-footer" class="level-left">Content</p>
          <p id="site-type-p" class="level-right">Type</p>
      </div>
    </footer>

Добавлен is-mobile, так как фрагмент имеет небольшую ширину, в противном случае он отображался бы один под другим.

Обновление: 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" /> 
    <footer class="modal-card-foot" style="justify-content: space-between;">
      <div id="site-type-div" class="">
          <p id="chart-footer" class="">Content</p>
      </div>
      <div id="site-type-div" class="">
          <p id="site-type-p" class="">Type</p>
      </div>
    </footer>

Кажется, вам нужно изменить стиль modal-card-foot, чтобы использовать justify-content: space-between; и разделить их на 2 деления. Информация от находится в правом нижнем колонтитуле карты

...