如何对齐 Bootstrap 中的内容 5

Question

我在对齐 Bootstrap 5 中的内容时遇到问题。我是网络开发的新手。所以，我有一个如下图所示的线框。我想像线框一样对齐我的内容。

我试过使用网格。但它不会像线框那样对齐。

            <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 的 link。谢谢:)

Answer 1

我用 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>

如何对齐 Bootstrap 中的内容 5

How to align content in Bootstrap 5

html

css

bootstrap-4