Выровняйте значок FontAwesome на <h1> - PullRequest
Новая
       41

Выровняйте значок FontAwesome на <h1>

0 голосов
/ 16 октября 2019

Я довольно новичок в изучении Bootstrap, но у меня возникли проблемы с выравниванием моего значка на одной линии с моим.

Как это выглядит сейчас .. У меня естьпытался исправить это внутри контейнера, но также с помощью строк, столбцов и нескольких методов выравнивания. Это мой код прямо сейчас: 

<div class="container">
  <div class="row">
    <div class="col">
    <h1 class="mb-3 ml-5">Products</h1>
    <button class="filterIcon navbar-toggler float-right align-self-start" type="button">
        <i class="fa fa-list"></i>
      </button>
      </div>
  </div>

Может кто-нибудь показать мне, что я делаю не так? Я не могу найти ответ в документации. Если у кого-то есть документация, пожалуйста, покажите мне, чтобы я мог извлечь уроки:).

Спасибо!

1 Ответ

0 голосов
/ 16 октября 2019

Вы можете использовать гибкий макет, чтобы выровнять элементы рядом и по центру по вертикали. Для начальной загрузки это означает использование классов d-flex и align-items-center

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<div class="container">
  <div class="row">
    <div class="col d-flex align-items-center">
      <h1 class="m-0" style="flex-grow:1;">Products</h1>
      <button class="filterIcon navbar-toggler" type="button">
        <i class="fa fa-list"></i>
      </button>
    </div>
  </div>
...