將 FontAwesome 圖標對齊到<h1></h1>

Question

我對學習 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>

有人可以告訴我我做錯了什么嗎？ 我似乎也無法在文檔中找到答案。 如果有人確實有文檔，請給我看，以便我可以從中學習:)。

謝謝！

Answer 1

您可以使用 flex 布局使項目並排對齊並垂直居中。 對於引導程序，這意味着使用類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>