Как сделать правую высоту столбца независимой в Bootstrap 4? - PullRequest
Новая
       32

Как сделать правую высоту столбца независимой в Bootstrap 4?

0 голосов
/ 18 марта 2020

Я пытаюсь получить следующий макет из двух столбцов, используя Bootstrap 4:

layout-1

Моя проблема заключается в том, когда я добавляю контент в правый столбец, он «толкает» левый внизу, вот так:

layout-2

Вот мой код: 

<div class="row">
    <div class="col-md-6">A</div>
    <div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>

<div class="row">
    <div class="col-md-6">B</div>
</div>

Я не уверен, что делать дальше ...

Ответы [ 2 ]

1 голос
/ 18 марта 2020

Технически, вы должны взять 'B' часть тега внутри тега 'A' и обернуть 'A' и 'B' их собственными тегами 'row' и 'col'. 

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col">A</div>
        </div>

        <div class="row">
            <div class="col">B</div>
        </div>

    </div>
    <div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Donec at orci porta, suscipit
        felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis
        aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat
        orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim,
        eget consequat sem dapibus nec.
    </div>
</div>
1 голос
/ 18 марта 2020

Вы можете получить структуру, о которой вы просите, как показано ниже. Вы просто ошиблись при размещении строки и столбца. 

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                A
            </div>
            <div class="col-md-12">
                B
            </div>
        </div>
    </div>
    <div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>
...