Question

我有一个模板，我正在尝试配置，我不太了解bootstrap，但我正在慢慢得到它，因为我研究。我试图在每个图像下面放置文本而不偏移底部的图像。（第一次发帖为我的菜鸟找借口）

@WebListener

<div class="container" id="projects-animate">
    <div class="row row-padded">
        <div class="col-md-3">
            <h2 class="fh5co-section-heading to-animate">Projects<span class="fh5co-border"></span></h2>
                <p class="to-animate">Libero velit fugit blanditiis tempora repellat iste inventore amet quaerat ex aliquid sint labore placeat esse.</p>
        </div>
        <div class="col-md-8 col-md-push-1">
            <div class="row">
                <div class="col-md-5 col-sm-5 col-xs-6 col-xxs-12 fh5co-project to-animate">
                    <a href="images/work_1.jpg" class="image-popup">
                        <div class="fh5co-overlay-text">Project no. 1</div>
                        <div class="fh5co-overlay"></div>
                        <img src="images/work_1.jpg" alt="Free HTML5 Template" class="img-responsive">
                    </a>
                    <div class="caption" class="col-md-3"><p>HELLLO</p></div>
                </div>
                <div class="col-md-5 col-sm-5 col-xs-6 col-xxs-12 fh5co-project to-animate">
                    <a href="images/work_2.jpg" class="image-popup">
                        <div class="fh5co-overlay-text">Project no. 2</div>
                        <div class="fh5co-overlay"></div>
                        <img src="images/work_2.jpg" alt="Free HTML5 Template" class="img-responsive">
                    </a>
                </div>
                <div class="col-md-5 col-sm-5 col-xs-6 col-xxs-12 fh5co-project to-animate">
                    <a href="images/work_3.jpg" class="image-popup">
                        <div class="fh5co-overlay-text">Project no. 3</div>
                        <div class="fh5co-overlay"></div>
                        <img src="images/work_3.jpg" alt="Free HTML5 Template" class="img-responsive">
                    </a>
                </div>
                <div class="col-md-5 col-sm-5 col-xs-6 col-xxs-12 fh5co-project to-animate">
                    <a href="images/work_4.jpg" class="image-popup">
                        <div class="fh5co-overlay-text">Project no. 4</div>
                        <div class="fh5co-overlay"></div>
                        <img src="images/work_4.jpg" alt="Free HTML5 Template" class="img-responsive">
                    </a>
                </div>
                <div class="col-md-5 col-sm-5 col-xs-6 col-xxs-12 fh5co-project to-animate">
                    <a href="images/work_5.jpg" class="image-popup">
                        <div class="fh5co-overlay-text">Project no. 5</div>
                        <div class="fh5co-overlay"></div>
                        <img src="images/work_5.jpg" alt="Free HTML5 Template" class="img-responsive">
                    </a>
                </div>
                <div class="col-md-5 col-sm-5 col-xs-6 col-xxs-12 fh5co-project to-animate">
                    <a href="images/work_6.jpg" class="image-popup">
                        <div class="fh5co-overlay-text">Project no. 6</div>
                        <div class="fh5co-overlay"></div>
                        <img src="images/work_6.jpg" alt="Free HTML5 Template" class="img-responsive">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

尝试在列div中添加此div：

<div class="carousel-caption">
    <h3>Example headline.</h3>
</div>

对于所有图片而言，删除带有div的{{1}}就像这样，因为你还有一个bug，你不能在html元素中包含两次class="caption;"。正确的方法是编写一个类并用空格分隔它们就像这个class =“class1 class2”：

class

您可以使用填充或标题标记来使其尽可能大，并将其放在您想要的位置。

如何使用bootstrap在图像下添加文本？

1 个答案: