Bootstrap адаптивный дизайн макета - PullRequest
Новая
       20

Bootstrap адаптивный дизайн макета

0 голосов
/ 12 марта 2019

Я пытаюсь создать следующий макет на рабочем столе с помощью Bootstrap v4.3.

enter image description here

Это должно привести к приведенному ниже макету на мобильном устройстве.

enter image description here

Однако, когда я запускаю свой код, я получаю результат ниже.

enter image description here

Где я ошибаюсь в макете в моем коде? 

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

Ответы [ 2 ]

0 голосов
/ 12 марта 2019

Проблема здесь в том, что когда ширина экрана падает ниже определенной ширины, все контейнеры «устанавливаются», чтобы иметь свою собственную строку. Так что вам, вероятно, придется перезаписать CSS. Вы могли бы установить 

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

или что-то в этом роде. Не копируйте пасту, не сработает.

0 голосов
/ 12 марта 2019

col-xs не существует в сетке макета начальной загрузки 4, используйте class="col-6 col-lg-12" на блоках, которые вы пытаетесь получить рядом друг с другом.

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

...