如何在Bootstrap3中制作这个图像

Question

如何在bootstrap 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 imge文件....

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

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

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Correct! JSX type can be a capitalized variable.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

你不需要添加“col-md-4”或“col-lg-4”类，因为如果没有提到更高的屏幕尺寸，bootstrap在较小的屏幕上使用相同的宽度。