自举响应式布局设计

Question

I am trying to build the following layout on desktop using Bootstrap v4.3. 我正在尝试使用Bootstrap v4.3在桌面上构建以下布局。

This should translate to the layout below on mobile. 这应转换为以下移动版上的布局。

However, when I run my code, I get the result below. 但是，当我运行代码时，会得到以下结果。

Where am I going wrong in the layout in my code? 我的代码布局哪里出问题了？

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

Answer 1

col-xs does not exist in bootstrap 4 layout grid, use class="col-6 col-lg-12" on the blocks you are trying to get next to eachother. cols-xs在bootstrap 4布局网格中不存在，请在要彼此相邻的块上使用class="col-6 col-lg-12" 。

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

Answer 2

The Problem here is, that when the width of the screen falls below a certain width the container are all "set" to have their own row. 这里的问题是，当屏幕的宽度降到某个宽度以下时，容器全部“设置为”具有自己的行。 So you will probably have to overwrite the CSS. 因此，您可能必须覆盖CSS。 You could possibly set 你可以设置

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

or something in that manner. 或类似的方式。 Don't copy paste, won't work. 不复制粘贴，将不起作用。

自举响应式布局设计

问题描述

2 个解决方案

解决方案1
0 已采纳 2019-03-12 15:24:37

解决方案2
0 2019-03-12 15:27:04

自举响应式布局设计

问题描述

2 个解决方案

解决方案1 0 已采纳 2019-03-12 15:24:37

解决方案2 0 2019-03-12 15:27:04

解决方案1
0 已采纳 2019-03-12 15:24:37

解决方案2
0 2019-03-12 15:27:04