Bootstrap 响应式布局设计答案

【问题标题】：Bootstrap responsive layout designBootstrap 响应式布局设计
【发布时间】：2019-08-03 03:10:11
【问题描述】：

我正在尝试使用 Bootstrap v4.3 在桌面上构建以下布局。

这应该转化为移动设备上的以下布局。

但是，当我运行我的代码时，我得到以下结果。

我的代码布局哪里出错了？

<body>
<div class="container-fluid shop-page-main-container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3"style="border: 1px solid blue"><!-- Subnav container -->
            <div class="row">
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-12 col-xl-12" style="border: 1px solid red"><!-- Subnav content A -->
                    <div class="shop-page-subnav-box">
                        <h3 class="shop-page-subnav-box-header">
                            This is content A
                        </h3>
                    </div>

                </div>

                <div class="col-xs-6 col-sm-6 col-md-12 col-lg-12 col-xl-12"  style="border: 1px solid green"><!-- Subnav content B -->
                    <div class="shop-page-subnav-box" style="margin-top: 10px">
                        <h3 class="shop-page-subnav-box-header">
                            This is content B
                        </h3>
                    </div>
                </div>

            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-9" style="border: 1px solid black"><!-- Main content -->
            <div class="shop-page-breadcrumbs">
                <h3 class="shop-page-subnav-box-header">
                    This is main content
                </h3>
            </span>
        </div>
    </div>
</div>
</body>

【问题讨论】：

Bootstrap 4 中没有-xs

标签： html css layout responsive-design bootstrap-4

【解决方案1】：

col-xs 在 bootstrap 4 布局网格中不存在，请在您尝试彼此相邻的块上使用 class="col-6 col-lg-12"。

https://getbootstrap.com/docs/4.0/layout/grid/

【讨论】：

【解决方案2】：

这里的问题是，当屏幕的宽度低于某个宽度时，容器都被“设置”为拥有自己的行。所以你可能不得不覆盖CSS。你可以设置

@media only screen and (max-width: 600px) { .class {max-width: 200px;} }

或类似的东西。不要复制粘贴，不行。

【讨论】：