html - Bootstrap - 左边是作品集图片，右边是标题和描述

Question

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

我想让作品集图片在左边，标题和描述在右边。

因此，结构将是:

图像 - 文本

图像 - 文本

图像 - 文本

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

<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-md-6">
                            <img src="1.jpg" alt="">
                            <div class="overlay"></div>
                        </div>
                        <div class="item-info col-md-6">
                            <h4 class="item-name">Some Title here</h4>
                            <p class="item-type">Description should be here</p>
                        </div>
                    </div>
            </div>
        </div>
</section>

这是 Bootstrap 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