引导5，如何在列中添加多个元素

Question

我有这个引导5代码，显示如下链接中的一些图像在一个网格中，图像受到一些CSS代码的影响。

#projects img {
  width: 100%;
  height: 100%;
}

<section id="projects">
            <div class="container text-center">
                <h4 class="fw-bold mb-3 border-bottom border-3">Mis Proyectos</h4>
                <div class="row g-4">
                    <div class="col-md-6">
                        <img
                        src="./images/cardcomponent.png" 
                        alt="card component"
                        class="rounded-3"
                        >
                    </div>
                    <div class="col-md-6">
                        <img
                        src="./images/yardsale.png" 
                        alt="yard sale"
                        class="rounded-3"
                        >
                    </div>
                    <div class="col-md-6">
                        <img
                        src="./images/qrcard.png" 
                        alt="web developer"
                        class="qr card"
                        >
                    </div>
                    <div class="col-md-6">
                      <img
                        src="./images/cardcomponent.png" 
                        alt="web developer"
                        class="rounded-3"
                        >
                    </div>
                </div>
            </div>
        </section>

我想在每个图像中添加一个标题<h6></h6>。

<div class="col-md-6">
    <h6>Title</h6>
    <img
    src="./images/cardcomponent.png" 
    alt="card component"
    class="rounded-3"
    >
</div>

但出于某种原因，该标题在专栏中没有包含或识别，显示了类似于这的内容，而这是相似的则显示了我想要做的事情。

Answer 1

@Emiliano Acevedo，由于它引起了人们对引导程序错误的关注，我确信团队必须为行列修复这些对齐问题。

下面是这个问题的快速解决办法。<div class="row g-4 align-items-end">可以修正在行元素中添加项对齐的问题。

我希望这能帮到你。

CodePen实例

Answer 2

使用text-center类的Div使所有文本对齐在它的中心位置。但是，由于您只希望<h4>标记对齐在中心，所以只需从该div中删除text-center类并将其添加到<h4>标记中即可。一旦您这样做，列中的<h6>标记将按您的意愿工作。比如：

#projects img {
    width: 100%;
    height: 100%;
}

<section id="projects">
    <div class="container">
        <h4 class="text-center fw-bold mb-3 border-bottom border-3">Mis Proyectos</h4>
        <div class="row g-4">
            <div class="col-md-6">
                <h6>Title 1</h6>
                <img src="./images/cardcomponent.png" alt="card component" class="rounded-3">
            </div>
            <div class="col-md-6">
                <h6>Title 2</h6>
                <img src="./images/yardsale.png" alt="yard sale" class="rounded-3">
            </div>
            <div class="col-md-6">
                <h6>Title 3</h6>
                <img src="./images/qrcard.png" alt="web developer" class="qr card">
            </div>
            <div class="col-md-6">
                <h6>Title 4</h6>
                <img src="./images/cardcomponent.png"  alt="web developer" class="rounded-3">
            </div>
        </div>
    </div>
</section>