在引导程序中连续显示3个图像，文本在下面

Question

我试图连续显示3个图像，标题下方有一些文字，还有一个按钮。我尝试在bootstrap中执行此操作只是为了让文本在整个地方移动。这似乎是我可以让文本保持不变的唯一方法，但现在您可以看到我的图像堆叠在彼此之上而不是彼此相邻。任何帮助将不胜感激！

 <section class="part2">
        <div class="container">
            <div class="row">
            <div class="text-center">
                <img alt="" class="resize-image" id="image1" src="/wp-content/themes/creativeforces/images/kid2.jpg"> 
                <p>Teach</p>
                <img alt="" class="resize-image" id="image2" src="/wp-content/themes/creativeforces/images/kid2.jpg">
                <p>Read</p>
                 <img alt="" class="resize-image" id="image3" src="/wp-content/themes/creativeforces/images/kid2.jpg">
                <p>Play</p>
            </div>
        </div>
        </div>

这就是现在的样子

我试图让它看起来像这样

Answer 1

您需要为行添加网格。这应该工作

 <section class="part2">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                <img alt="" class="resize-image center-block" id="image1" src="/wp-content/themes/creativeforces/images/kid2.jpg" /> 
                <p class="text-center">Teach</p></div>
                <div class="col-md-4"><img alt="" class="resize-image center-block" id="image2" src="/wp-content/themes/creativeforces/images/kid2.jpg" />
                <p class="text-center">Read</p></div>
                 <div class="col-md-4"><img alt="" class="resize-image center-block" id="image3" src="/wp-content/themes/creativeforces/images/kid2.jpg" />
                <p class="text-center">Play</p></div>
            </div>
        </div>
</section>

Answer 2

请使用此示例。你需要使用像“col-md-x”这样的引导网格类，其中x是从1到12的数字。

<section class="part2">
    <div class="container">
        <div class="row">
        <div class="col-md-4 text-center">
            <img alt="" class="resize-image" id="image2" src="/wp-content/themes/creativeforces/images/kid2.jpg">
            <p>Read</p>
        </div>
        <div class="col-md-4 text-center">
            <img alt="" class="resize-image" id="image1" src="/wp-content/themes/creativeforces/images/kid2.jpg"> 
            <p>Teach</p>
        </div>
        <div class="col-md-4 text-center">
             <img alt="" class="resize-image" id="image3" src="/wp-content/themes/creativeforces/images/kid2.jpg">
            <p>Play</p>
        </div>
    </div>