Кто-нибудь может предложить bootstrap класс для высоты двух столбцов - PullRequest
Новая
       0

Кто-нибудь может предложить bootstrap класс для высоты двух столбцов

0 голосов
/ 28 февраля 2020

У меня есть два столбца с панелью и содержимое отличается. Я хочу отобразить два столбца с одинаковой высотой. Может кто-нибудь предложить 

<div class="row">
<div class="col-md-12">


     <div class="row">
          <div class="col-md-6">
            lorem ipsum lorem ipsum lorem ipsum
       </div>
    <div class="col-md-6">
            lorem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum
       </div>
    </div>
    </div>

Спасибо

Ответы [ 2 ]

0 голосов
/ 28 февраля 2020 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
  <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
</div>

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

0 голосов
/ 28 февраля 2020

Используйте Bootstrap 4 Для этого. Проверьте фрагмент. 

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">



</head>

<body>
    <div class="row">
        <div class="col-md-12">


            <div class="row">
                <div class="col-md-6">
                    lorem ipsum lorem ipsum lorem ipsum
                </div>
                <div class="col-md-6">
                    lorem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem
                    ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum
                    lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum
                </div>
            </div>
        </div>


</body>
</html>

Установите это в режиме полного просмотра.

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

Похожие темы

...