Html 将对内容的约束保留在引导容器/Div中

我正试着把所有的东西都缩在一个容器里。我有需要保持一定宽度和高度的图像。但是，如果屏幕变小，所有图像开始失去位置，内容开始缩小，大小开始改变。我知道图像/内容将更难看到

我在HTML和CSS中使用Bootstrap4，d-flex是Bootstrap，没有填充只是删除默认cols的填充

---

试试这段代码，这是处理您请求的好方法

更改

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

对各种组件进行流体运动的主要更改是在开始处添加容器流体标记

如果您可以创建流体运动的ilusion，那么您必须为图像添加“img流体”类，并且所有组件都将根据不同的屏幕大小动态调整代码

还有一些问题没有得到很好的解决

与其在代码中使用flex，不如尝试创建一个类型为scss的样式页面，这样您就可以动态地解决这个问题。Bootstrap4将flex合并到其代码中，但留下一些空白，您可以从样式页中利用这些空白。我建议您查看下一页，其中详细解释了这一点。看

---

祝你好运

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

<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>