Bootstrap 4 меняет положение col на разные размеры - PullRequest
Новая
       8

Bootstrap 4 меняет положение col на разные размеры

0 голосов
/ 07 января 2019

Я пытаюсь отобразить 3 столбца в другом порядке и расположении, на дисплее больше или меньше точки останова "md".

В> макете md столбец «A» и «B» должен быть один над другим, а столбец «C» - справа от них обоих.

В макете

До сих пор я пробовал большинство комбинаций классов начальной загрузки (для строки и столбца), но не выяснил, как достичь этого поведения.

Прикрепил изображение, чтобы лучше объяснить вопрос.

enter image description here

1 Ответ

0 голосов
/ 07 января 2019

Использование Bootstrap 4 сделать что-то вроде этого ... 

.border-div {
    margin: 5px;
    border: 4px solid;
    min-height: 100px;
}

.c-div-block {
    max-width: calc(100% - 10px);
    max-height: calc(100% - 25px);
}

.border-div.normal-span {
    line-height: 100px;
}

.border-div.expanded-span {
    line-height: 200px;
}
<!DOCTYPE HTML>
<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
    <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>

</head>

<body>

    <div class="container-fluid my-5">
        <div class="row no-gutters position-relative py-2">
            <div class="col-12 col-md-9 order-first order-md-first">
                <div class="border-div border-dark text-center normal-span">A</div>
            </div>
            <div class="col-6 col-md-9 order-2 order-md-last">
                <div class="border-div border-danger text-center normal-span">B</div>
            </div>
            <div class="position-absolute offset-md-9 col-md-3 order-md-2 h-100 d-none d-md-block">
                <div class="border-div border-success h-100 c-div-block text-center expanded-span">C</div>
            </div>
            <div class="col-6 order-last d-block d-md-none">
                <div class="border-div border-success text-center normal-span">C</div>
            </div>
        </div>
    </div>

</body>

</html>

Примечание: div ширина и высота могут отличаться в соответствии с вашими требованиями, поэтому произведите регулировку самостоятельно.

Надеюсь, это поможет многим.

...