如何在Bootstrap5中對齊內容

我在對齊內容時遇到問題Bootstrap 5。我是 Web 開發的新手。所以，我有一個如下圖所示的線框。 我想像線框一樣對齊我的內容。

我嘗試過使用網格。但它不會像線框一樣對齊。

            <section class="value-section container-fluid mt-5">
                <p class="h1 text-center">
                    We look after your pets<br>with our best staffs
                </p>
                <div class="value-section grid">
                    <div class="value-1">
                        <div class="g-col-6">
                            <img class="pet rounded float-start" src="./images/assets/slider-images/dog-slider.webp" alt="Dog">
                        </div>
                    </div>
                    <div class="value-2">
                        <div class="g-col-6">
                            <img class="pet rounded float-start" src="./images/assets/slider-images/cat-slider.webp" alt="Cat">
                        </div>
                    </div>
                    <div class="value-3">
                        <div class="g-col-6">
                            <img class="pet rounded float-end" src="./images/assets/slider-images/small-pet-slider.webp" alt="Small pet e.g rabbit">
                        </div>
                    </div>
                    <div class="value-4">
                        <div class="g-col-6">
                            <img class="pet rounded float-end" src="./images/assets/slider-images/fish-slider.webp" alt="Fish">
                        </div>
                    </div>
                </div>
            </section>

看起來像這樣 有人可以幫我正確對齊內容嗎？我把我的專案放在了我的 GitHub 上。這是我的GitHub的鏈接。謝謝 ：）

uj5u.com熱心網友回復：

我用 flex-box 做了你想要的。在整頁中查看。

img{
  width:100px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<section class="value-section container-fluid mt-5">
  <p class="h1 text-center">
    We look after your pets<br>with our best staffs
  </p>
  <div class="value-section d-flex justify-content-around mt-5">

    <div class="d-flex justify-content-around flex-column gap-5">
      <div class="value-1">
         <div class="g-col-6 d-flex">
            <img class="pet rounded float-end" src="https://placekitten.com/640/360" alt="Small pet e.g rabbit">
            <div class="ms-2"><h4>Value 1</h4><small>Appropriately optimize corporate</small></div>
          </div>
      </div>
      <div class="value-2">
         <div class="g-col-6 d-flex">
            <img class="pet rounded float-end" src="https://placekitten.com/640/360" alt="Small pet e.g rabbit">
            <div class="ms-2"><h4>Value 2</h4><small>Appropriately optimize corporate</small></div>
          </div>
      </div >
        
      </div>
      <div class="d-flex justify-content-around flex-column gap-5 ">
        <div class="value-3">
          <div class="g-col-6 d-flex">
            <img class="pet rounded float-end" src="https://placekitten.com/640/360" alt="Small pet e.g rabbit">
            <div class="ms-2"><h4>Value 3</h4><small>Appropriately optimize corporate</small></div>
          </div>
        </div>
        <div class="value-4">
           <div class="g-col-6 d-flex">
            <img class="pet rounded float-end" src="https://placekitten.com/640/360" alt="Small pet e.g rabbit">
            <div class="ms-2"><h4>Value 4</h4><small>Appropriately optimize corporate</small></div>
          </div>
        </div>
      </div>
    </div>
</section>

uj5u.com熱心網友回復：

嗨，請嘗試從檔案中閱讀這兩個鏈接，這可能會有所幫助：

https://getbootstrap.com/docs/5.1/utilities/flex/https://getbootstrap.com/docs/5.1/utilities/position/或https://getbootstrap.com/docs/5.1/utilities/flex/

標籤：html css 引导程序 4

上一篇：單擊關閉btn時如何清空陣列的輸入欄位？

下一篇：為什么“Checkboxhack”對我的3d元素不起作用？