在一行中显示3个图像，并在引导下显示文本。

Question

我试图用一个标题、标题下面的一些文本和一个按钮在一行中显示3幅图像。我尝试过在引导中这样做，结果却让文本在整个地方移动。这似乎是唯一的方法，我可以让文本保持不变，但现在你可以看到，我的图像是堆叠在一起，而不是彼此相邻。任何帮助都将不胜感激！

 <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”这样的引导网格类，其中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>

​