Проблемы со свойством Display на Bootstrap 4 - PullRequest
Новая
       4

Проблемы со свойством Display на Bootstrap 4

0 голосов
/ 11 января 2020

У меня возникли проблемы со свойством display на Bootstrap 4.3.1. Это используется на странице ToyHou.se. У меня есть «своего рода» адаптивная версия для этого, которая включает небольшие изменения, чтобы чтение выглядело хорошо на xs и sm.
Это означает, что у меня есть две версии этого коллапса. На «Color Palette» у меня есть один для md и выше (A) и один для xs и sm (B). А версия работает нормально. Версия B, кажется, не работает вообще (ничего не показывает на 767px или ниже) или деформирует коллапс.
Я новичок в свойстве display, и хотя я прочитал примеры и руководство, мне трудно понять, как оно работает.
Как я хочу, чтобы это выглядело: В очень маленькой / маленькой версии различные карты будут отображаться по центру под одной картой. В то время как средний и выше будет отображать два ряда из двух карт и третий ряд из одной карты (как это закодировано).
(извините за грязное кодирование, на ToyHou.se вы не можете использовать отдельную css, если не заплатите премиум-членство) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FIDEO</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
    <div class="mx-auto w-100" style="font-size: 15px;">
        <div class="row no-gutters table-responsive d-flex justify-content-center">
            <!-- ACORDEON -->
            <div class="accordion" id="accordion" style="width: 520px; margin: 10px 5px; display: block">
                <div class="mark-palette">
                    <div class="text-uppercase" style="background: #8f49bb;">
                        <a class="btn rounded-0 text-white d-flex border-bottom-0 justify-content-between" data-toggle="collapse" data-target="#mark-palette" aria-expanded="false" aria-controls="mark-palette" style="font-size: 18px; cursor: pointer; border: 1px solid #762ea3;">Color Palette and Markings<i class="fas fa-palette fa-fw my-auto"></i></a>
                    </div>
                    <div class="collapse" data-parent="#accordion" id="mark-palette">
                        <div class="p-3 bg-faded table-responsive" style="height: 290px; border:1px solid #762ea3;">
                            <div class="row no-gutters mb-2">
                                <p style="font-weight: bold; font-size: 16px;">Color Palette</p>
                                <!-- Blocked on SM because bugs -->
                                <div class="d-none d-sm-none d-md-block">
                                    <div class="mx-auto">
                                        <div class="d-flex">
                                            <div class="card text-center rounded-0" style="background-color: #262424; color:#fff; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 1 | #262424 |</p>
                                            </div>
                                            <div class="card text-center rounded-0" style="background-color: #797979; color:#fff; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 90%">| 2 | #797979 |</p>
                                            </div>
                                        </div>
                                        <div class="d-flex">
                                            <div class="card text-center rounded-0" style="background-color: #eeeeee; color:#000; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 3 | #eeeeee |</p>
                                            </div>
                                            <div class="card text-center rounded-0" style="background-color: #673388; color:#fff; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 4 | #673388 |</p>
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-center">
                                            <div class="card text-center rounded-0" style="background-color: #8f49bb; color:#fff; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 5 | #8f49bb |</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Phone friendly version -->
                                <div class="d-none d-sm-none">
                                    <div class="mx-auto">
                                        <div class="d-flex">
                                            <div class="card text-center rounded-0" style="background-color: #262424; color:#fff; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 1 | #262424 |</p>
                                            </div>
                                        </div>
                                        <div class="d-flex">
                                            <div class="card text-center rounded-0" style="background-color: #797979; color:#fff; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 90%">| 2 | #797979 |</p>
                                            </div>
                                        </div>
                                        <div class="d-flex">
                                            <div class="card text-center rounded-0" style="background-color: #eeeeee; color:#000; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 3 | #eeeeee |</p>
                                            </div>
                                        </div>
                                        <div class="d-flex">
                                            <div class="card text-center rounded-0" style="background-color: #673388; color:#fff; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 4 | #673388 |</p>
                                            </div>
                                        </div>
                                        <div class="d-flex">
                                            <div class="card text-center rounded-0" style="background-color: #8f49bb; color:#fff; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 5 | #8f49bb |</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr style="border-top: 2px solid rgba(0,0,0,.1);">
                            <div class="row no-gutters mb-2">
                                <p style="font-weight: bold; font-size: 16px;">Markings</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus incidunt laborum ea, excepturi ducimus vel odio architecto eaque ipsum, soluta doloremque sint deserunt assumenda eos magnam rem distinctio exercitationem cupiditate.</p>
                                <p>| 1 | Lorem ipsum dolor sit amet.</p>
                                <p>| 2 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                <p>| 3 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                <p>| 4 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                <p>| 5 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

1 Ответ

0 голосов
/ 11 января 2020

Измените классы дружественной для телефона версии на 

<!-- Phone friendly version -->
<div class="d-sm-block d-md-none mx-auto">
    ...
</div>

Ранее вы установили d-none и d-sm-none, что скрывает это для обоих этих экранов. mx-auto - применить автоматические поля, центрирующие элемент.

Кроме того, добавьте класс w-100 к элементу цветовой палитры <p>, чтобы он был заполнен, ширина 

<p style="font-weight: bold; font-size: 16px;" class="w-100">Color Palette</p>

Вот рабочий пример 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>FIDEO</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>

<body>
    <div class="mx-auto w-100" style="font-size: 15px;">
        <div class="row no-gutters table-responsive d-flex justify-content-center">
            <!-- ACORDEON -->
            <div class="accordion" id="accordion" style="width: 520px; margin: 10px 5px; display: block">
                <div class="mark-palette">
                    <div class="text-uppercase" style="background: #8f49bb;">
                        <a class="btn rounded-0 text-white d-flex border-bottom-0 justify-content-between" data-toggle="collapse" data-target="#mark-palette" aria-expanded="false" aria-controls="mark-palette" style="font-size: 18px; cursor: pointer; border: 1px solid #762ea3;">Color
                            Palette and Markings<i class="fas fa-palette fa-fw my-auto"></i></a>
                    </div>
                    <div class="collapse" data-parent="#accordion" id="mark-palette">
                        <div class="p-3 bg-faded table-responsive" style="height: 290px; border:1px solid #762ea3;">
                            <div class="row no-gutters mb-2">
                                <p style="font-weight: bold; font-size: 16px;" class="w-100">Color Palette</p>
                                <!-- Blocked on SM because bugs -->
                                <div class="d-none d-sm-none d-md-block">
                                    <div class="mx-auto">
                                        <div class="d-flex">
                                            <div class="card text-center rounded-0" style="background-color: #262424; color:#fff; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 1 | #262424 |</p>
                                            </div>
                                            <div class="card text-center rounded-0" style="background-color: #797979; color:#fff; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 90%">| 2 | #797979 |</p>
                                            </div>
                                        </div>
                                        <div class="d-flex">
                                            <div class="card text-center rounded-0" style="background-color: #eeeeee; color:#000; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 3 | #eeeeee |</p>
                                            </div>
                                            <div class="card text-center rounded-0" style="background-color: #673388; color:#fff; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 4 | #673388 |</p>
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-center">
                                            <div class="card text-center rounded-0" style="background-color: #8f49bb; color:#fff; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 5 | #8f49bb |</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Phone friendly version -->
                                <div class="d-sm-block d-md-none mx-auto">
                                    <div class="mx-auto">
                                        <div class="d-flex">
                                            <div class="card text-center rounded-0" style="background-color: #262424; color:#fff; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 1 | #262424 |</p>
                                            </div>
                                        </div>
                                        <div class="d-flex">
                                            <div class="card text-center rounded-0" style="background-color: #797979; color:#fff; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 90%">| 2 | #797979 |</p>
                                            </div>
                                        </div>
                                        <div class="d-flex">
                                            <div class="card text-center rounded-0" style="background-color: #eeeeee; color:#000; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 3 | #eeeeee |</p>
                                            </div>
                                        </div>
                                        <div class="d-flex">
                                            <div class="card text-center rounded-0" style="background-color: #673388; color:#fff; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 4 | #673388 |</p>
                                            </div>
                                        </div>
                                        <div class="d-flex">
                                            <div class="card text-center rounded-0" style="background-color: #8f49bb; color:#fff; width: 230px; height: inherit; margin: 3px;">
                                                <p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 5 | #8f49bb |</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr style="border-top: 2px solid rgba(0,0,0,.1);">
                            <div class="row no-gutters mb-2">
                                <p style="font-weight: bold; font-size: 16px;">Markings</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus incidunt laborum ea, excepturi ducimus vel odio architecto eaque ipsum, soluta doloremque sint deserunt assumenda eos magnam rem distinctio exercitationem
                                    cupiditate.
                                </p>
                                <p>| 1 | Lorem ipsum dolor sit amet.</p>
                                <p>| 2 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                <p>| 3 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                <p>| 4 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                <p>| 5 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...