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

Question

我有一个我正在尝试配置的模板，我对 Bootstrap 了解不多，但我在研究过程中慢慢了解它。我试图在不偏移底部图像的情况下将文本放在每个图像下方。 (第一次发帖，菜鸟见谅)

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

对于所有图像都是这样，通过使用 class="caption;" 删除 div 因为你在那里也有一个错误，你不能包含两次 class 在 html 元素里面。正确的方法是编写一个类并用空格将它们分隔开，就像这样 class="class1 class2":

<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="carousel-caption">
    <h3>Example headline.</h3>
</div>
                </div>

您可以调整内边距或标题标签，使其尽可能大，并将其放置在您想要的位置。