具有给定布局的引导带5中的响应图像

Question

我正在尝试创建一个网页，每个部分都有一个图像。当在大屏幕上观看时，图像应位于文本的两侧，如下所示：

​

​

然而，我希望每一张图片都能叠加在每个部分的顶部，一旦在一个较小的屏幕上观看，而不是继续并排显示。以下是应如何看待这个问题：

​

​

…但考虑到当前的实现，现在的情况如下：

​

​

我应该如何编码这个页面，以便在桌面和移动设备上适当地显示图像?我希望代码能够在大屏幕上复制第一个图像，在较小的屏幕上复制第二个图像。不过，如果这不是一个聪明的前端设计，并应采取不同的做法，我是开放的不同的设计，特别是如果他们更普遍接受。

我正在使用引导5来实现这个布局。下面的代码也使用Javascript/React，但这不应该是一个因素。

下面是在第一和第三张图像中使用的代码：

class AboutSection extends Component {
render() {
    const startImage = "float-start me-4";
    const endImage = "float-end ms-4";
    var imageClass = "img-fluid my-4 rounded w-25 " + (IsOdd(this.props.index) ? startImage : endImage);

    return (
        <>
            <section class="p-4">
                <div class="container">
                    <div class="d-sm-flex">
                        <div>
                            <img class={imageClass} src={Test} alt={this.props.imageAltText} />
                            <h2>{this.props.header}</h2>
                            <p class="lead my-3">{this.props.body}</p>
                            {this.props.subsection.map((item) => {
                                return (
                                    <AboutSubsection subheader={item.subheader} subbody={item.subbody} />
                                );
                            })}
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}

下面是我为实现第二个图像的设计而修改的代码：

class AboutSection extends Component {
render() {
    const startImage = "float-start me-4";
    const endImage = "float-end ms-4";
    var imageClass = "img-fluid my-4 rounded " + (IsOdd(this.props.index) ? startImage : endImage);

    return (
        <>
            <section class="p-4">
                <div class="container">
                    <div class="row">
                        <img class={imageClass} src={Test} alt={this.props.imageAltText} />
                        <div class="col-12">
                            <h2>{this.props.header}</h2>
                            <p class="lead my-3">{this.props.body}</p>
                            {this.props.subsection.map((item) => {
                                return (
                                    <AboutSubsection subheader={item.subheader} subbody={item.subbody} />
                                );
                            })}
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}

Answer 1

正确的方法不是为每种页面编写代码，而是始终使用相同的页面。为此，您需要使用响应性CSS样式，如下所示：

.img-right { float: right; }

@media only screen and (max-width: 640px) {

.img-right { float: none; width: 100%; }

}

在我看来，您的任务不是使用引导来格式化内容。引导程序旨在为您提供现成的基本设计元素(设计框架)，内容是您的职责所在。我想是的..。