如何在 Bootstrap 3 中制作此图像

Question

如何在引导程序 3 中制作此图像.... 我将可以在移动视图中查看此图像到三个单独的行和桌面中的一行。 在移动视图中，每一行都包含图像的一部分.. 请帮帮我..

<section class="container-fluid">
    <div class="row">
        <div class="col-md-3 padding-0">

                <img src="/images/chatti.png" alt="5" >

        </div>
        <div class="col-lg-4 padding-0">

                <img src="/images/sofa.png" alt="5" >

        </div>
        <div class="col-md-4 padding-0">

                <img src="/images/slider.png" alt="5" >

        </div>


    </div>
    </section>

这是一个psd图像文件......

Answer 1

要在移动设备中查看单行图像，您必须编写如下引导类：

<div class="row">
    <div class="col-md-3 col-sm-4 col-xs-4 padding-0">
            <img src="/images/chatti.png" alt="5" >
    </div>
    <div class="col-lg-4 col-sm-4 col-xs-4 padding-0">
            <img src="/images/sofa.png" alt="5" >
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4 padding-0">
            <img src="/images/slider.png" alt="5" >
    </div>
</div>

col-sm 用于平板电脑，col-xs 用于手机

Answer 2

您是否也尝试以较小的屏幕尺寸将图像显示为单个图像？如果是，那么代码应该是这样的

<div class="row">
        <div class="col-xs-4 col-sm-4 padding-0">
                <img src="/images/chatti.png" alt="5" >
        </div>
        <div class="col-xs-4 col-sm-4 padding-0">
                <img src="/images/sofa.png" alt="5" >
        </div>
        <div class="col-xs-4 col-sm-4 padding-0">
                <img src="/images/slider.png" alt="5" >
        </div>
</div>

您无需添加“col-md-4”或“col-lg-4”类，因为如果未提及较大的屏幕尺寸，引导程序使用较小屏幕的相同宽度。