Bootstrap 5 中具有给定布局的响应式图像

Question

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

但是，我希望每张图片在较小的屏幕上查看后都堆叠在每个部分的顶部，而不是继续并排显示。下面是应该的样子：

…但是考虑到当前的实现，这就是它现在的样子：

我应该如何编写此页面的代码才能使图像在桌面和移动设备上正确显示？我希望代码能够复制第一张图像大屏幕，小屏幕上的第二张图片。但是，如果这不是一个聪明的前端设计并且应该以不同的方式接近，我对不同的设计持开放态度，特别是如果它们被更普遍接受的话。

我正在使用 Bootstrap 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%; }

}

在我看来，您的任务不是使用 bootstrap 来格式化内容。 Bootstrap旨在为您提供现成的基本设计元素（设计骨架），内容是您的责任范围。我也这么认为...

Bootstrap 5 中具有给定布局的响应式图像

Responsive Images in Bootstrap 5 with Given Layout

javascript

html

reactjs

bootstrap-5

responsive-images