Равная высота для первого div в разных столбцах (bootstrap 4) - PullRequest
Новая
       1

Равная высота для первого div в разных столбцах (bootstrap 4)

0 голосов
/ 09 октября 2019

У меня есть следующая структура HTML: 

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-12 col-lg-4 col-md-4">
            <div class="title">Some title</div>
                <ul>
                    <li>test 1</li>
                    <li>test 2</li>
                </ul>
            </div>
        </div>

        <div class="col-12 col-sm-12 col-lg-4 col-md-4">
            <div class="title">Some long title </div>
                <ul>
                    <li>test 1</li>
                    <li>test 2</li>
                </ul>
            </div>
        </div>

        <div class="col-12 col-sm-12 col-lg-4 col-md-4" >
            <div class="title">Some very very long title</div>
            <ul>
                <li>test 1</li>
                <li>test 2</li>
            </ul>
        </div>
    </div>
</div>

Мне нужно, чтобы каждый из блоков div.title по высоте был равен максимальному. Как я могу это сделать?

Ответы [ 2 ]

0 голосов
/ 09 октября 2019

Вы можете использовать этот код 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, 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">
    <title>Hello, world!</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        .box {
            background-color: #dddddd;
            padding: 20px;
        }
        .box h1 {
            font-size: 20px;
            font-weight: 700;
        }
        .box ul {
            margin: 0;
            padding: 0;
        }
        .box ul li {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        .box ul.bottom {
            padding-bottom: 60px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-4 col-md-4 col-sm-12">
                <div class="box">
                    <h1 class="title">Some title</h1>
                    <ul class="bottom">
                        <li>test 1</li>
                        <li>test 2</li>
                    </ul>
                </div>
            </div>
            <div class="col-12 col-lg-4 col-md-4 col-sm-12">
                <div class="box">
                    <h1 class="title">Some long title</h1>
                    <ul>
                        <li>test 1</li>
                        <li>test 2</li>
                    </ul>
                </div>
            </div>
            <div class="col-12 col-lg-4 col-md-4 col-sm-12">
                <div class="box">
                    <h1 class="title">Some very very long title</h1>
                    <ul>
                        <li>test 1</li>
                        <li>test 2</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <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>
</body>
</html>
0 голосов
/ 09 октября 2019

Я думаю, что лучший способ сделать это - использовать таблицу, поскольку она может автоматически выравнивать несколько столбцов. Сама Bootstrap не может сделать несколько заголовков одинаковыми по высоте в предоставленной вами структуре HTML.

Кроме того, вы дважды закрываете теги div, см. в этом примере для исправленияверсия. Вы пытаетесь закрыть заголовки div дважды, например, так: 

            <div class="title">Some long title </div>
                <ul>
                    <li>test 1</li>
                    <li>test 2</li>
                </ul>
            </div>

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

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

Нет похожих вопросов

...