在引导程序中连续显示 3 个图像，下面是文本 [英] displaying 3 images in a row with text underneath in bootstrap

查看：22
本文介绍了在引导程序中连续显示 3 个图像，下面是文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图连续显示 3 张带有标题的图像、标题下方的一些文本和一个按钮.我试过在引导程序中这样做只是为了让文本到处移动.这似乎是我可以让文本保持原样的唯一方法，但是现在您可以看到我的图像堆叠在一起而不是彼此相邻.任何帮助将不胜感激！

 
<div class="容器"><div class="row"><div class="text-center"><img alt="" class="resize-image" id="image1" src="/wp-content/themes/creativeforces/images/kid2.jpg"><p>教</p><img alt="" class="resize-image" id="image2" src="/wp-content/themes/creativeforces/images/kid2.jpg"><p>读取</p><img alt="" class="resize-image" id="image3" src="/wp-content/themes/creativeforces/images/kid2.jpg"><p>播放</p>

这是现在的样子

我试图让它看起来像这样

解决方案

您需要向行添加网格.这应该有效

 
<div class="容器"><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">教学</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">阅读</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">播放</p></div>

</section>

I am trying to display 3 images in a row with a title, some text underneath the title and a button. I have tried doing this in bootstrap only to get the text moving all over the place. This seems like the only way I could get the text to stay put, but now as you can see my images are stacked on top of each other rather than next to each other. Any help would be appreciated!

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

this is what it looks like now

i am trying to get it to look something like this

解决方案

You will need to add grids to your rows. This should work

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

这篇关于在引导程序中连续显示 3 个图像，下面是文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆