在引导容器 / div 中保持对内容的约束答案

【问题标题】：Keep Constraints to Content Within a Bootstrap Container / Div在引导容器 / div 中保持对内容的约束
【发布时间】：2021-04-10 20:50:14
【问题描述】：

我正在尝试缩小容器内的所有内容。我有需要保持一定宽度和高度的图像。但是，如果屏幕变小，所有图像都开始失去位置，内容开始缩小，尺寸开始改变。我知道图片/内容会更难看到。

我正在使用带有 HTML 和 CSS 的 Bootstrap 4 d-flex 是引导程序，no-padding 只是删除了默认 cols 的填充。

smaller view Larger View

<div class="container" style="min-width: 100%;">
                    <div class="row main-stage" id="main-stage" style="justify-content: center;">
                        <div class="col-12 d-flex no-padding text-center justify-content-center" style="background-color: #fff;">
                            <img src="/assets/img/banner/1200x200Banner.png" alt="" class="p-4" style="min-height: 200px;">
                        </div>
                        
                    </div>
                    <div class="row">
                        <div class="col-12 d-flex no-padding">
                            <div class="col-2" style="background-color: #fff;">
                                <img  src="/assets/img/banner/400x160Banner.png" alt=""
                                    style="min-height: 400px; max-height: 400px; min-width: 100%; border-top: solid 10px; border-bottom: solid 10px;">
                            </div>
                            <div class="col-8" style="background-color: #fff;">
                                <div class="row m-4">
                                    <div class="col-12 text-center">
                                        <img src="/assets/img/banner/200x100banner.png" alt="">
                                    </div>
                                </div>
                                <div class="row text-center">
                                    <div class="col-4">
                                        <img src="/assets/img/banner/100x180Banner.png" alt="" >
                                    </div>
                                    <div class="col-4 text-center">
                                        <img src="/assets/img/banner/200x100banner.png" alt="" >
                                    </div>
                                    <div class="col-4">
                                        <img src="/assets/img/banner/100x180Banner.png" alt="">
                                    </div>

                                </div>
                            </div>
                            <div class="col-2" style="background-color: #fff;">
                                <img class="" src="/assets/img/banner/400x160Banner.png" alt=""
                                    style="max-height: 400px; border-top: solid 10px; border-bottom: solid 10px;">
                            </div>

                        </div>
                       
                        

                    </div>

                </div>

【问题讨论】：

你有两张图片；一个似乎是平板电脑，另一个似乎是笔记本电脑（或台式机显示器）。如果有人使用 CSS 像素宽度为 320 像素的旧 iPhone 5 浏览您的页面，会发生什么情况？使用 Bootstrap 最简单的方法是先从最小的屏幕开始，然后从该布局展开，而不是将布局视为缩小（Bootstrap 是mobile-first框架）。
我认为您需要使用 .col-lg-* 和 .col-md-* 类来代替 .col-* 类用于桌面或平板电脑视图。如果您只想为这两个设备制作页面。如果您想为所有视图进行响应式设计，那么您也可以使用 .col-sm-* 类。它将为所有视图创建响应式设计。

标签： html css bootstrap-4

【解决方案1】：

试试这个代码，它是满足您请求的好方法。

Run code @ codeply

变化

我对代码进行了不同的修改，因为行和容器的嵌套不是一个好主意。

使各个组件流畅运动的主要变化是在开头添加了container-fluid标签。

如果你可以创造流体运动的错觉，你必须为图像添加“img-fluid”类，所有组件都会动态地使代码适应不同的屏幕尺寸。

还有flex concepts申请了没有很好解决。

与其在代码中使用 flex，不如尝试创建一个 scss 类型的样式页面，以便您可以动态解决这个问题。 Bootstrap 4 将 flex 合并到它的代码中，但留下了一些可以从样式页面中利用的空间。我建议您查看以下页面，其中对此进行了详细说明。见link

祝你好运！

【讨论】：