Question

我正在尝试创建自己的投资组合网站，但我有点卡住了...

我想使投资组合图片在左侧，标题和说明在其右侧。

因此，结构为：

图片-文字

我尝试编写一些代码，并且可以正常工作，但是我不确定这是否是最好的方法。

relation

这是引导程序3

Answer 1

您使用的方式是正确的。但是它可以在某些使用了col-md

的设备上运行

如果需要图片-文字

图片-文字

对于所有设备。

<section class="section works" id="works">
    <div class="container">
        <div class="row">
            <div class="works-item col-md-12 col-xs-12">
                    <div class="row">
                        <div class="works-image col-xs-6">
                            <img src="1.jpg" alt="">
                            <div class="overlay"></div>
                        </div>
                        <div class="item-info col-xs-6">
                            <h4 class="item-name">Some Title here</h4>
                            <p class="item-type">Description should be here</p>
                        </div>
                    </div>
            </div>
        </div>
</section

如果您希望图像占40％，文本占60％，请分别使用col-xs-4 col-xs-8

Bootstrap-左组合图片，右标题和说明

1 个答案: