Bootstrap 将列高度拉伸到父级 DIV 高度

Question

这是我使用的代码：

<div class="container-fluid">
<div class="row">
<div class="col-md-2 text-center align-self-center mh-100" style="background-color:red;">
30% Off
</div>
<div class="col-md-8">
<span class="badge badge-default">Promo Code</span>
<h3 style="font-size:20px;font-weight:700;">Lorem ipsum dolor sit amet.</h3>
<p style="font-size:12px;">Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor.</p>
</div>
<div class="col-md-2 text-center align-self-center">
<button class="btn blue-gradient btn-rounded btn-md">Get Code</button>
</div>
</div>
</div>

输出如下画面：

问题：col 高度没有延伸到父 div。我已经将背景设置为红色，并且它没有拉伸到父 div 高度。

我可以使用填充属性但有没有其他方法可以做到这一点！

Answer 1

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Hello, world!</title>
    <style>
        .height-auto {
            background-color: red;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFF;
        }
    </style>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2 height-auto">
                30% Off
            </div>
            <div class="col-md-8">
                <span class="badge badge-default">Promo Code</span>
                <h3 style="font-size:20px;font-weight:700;">Lorem ipsum dolor sit amet.</h3>
                <p style="font-size:12px;">
                    Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>.
                    Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu
                    sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor.
                    Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>.
                    Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu
                    sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor.
                    Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>.
                    Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu
                    sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor.
                    Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>.
                    Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu
                    sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor.
                    Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>.
                    Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu
                    sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor.
                    Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>.
                    Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu
                    sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor.
                </p>
            </div>
            <div class="col-md-2 text-center align-self-center">
                <button class="btn blue-gradient btn-rounded btn-md">Get Code</button>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>
</body>

</html>

Answer 2

您所要做的就是设置父行高（例如：- 300px）并将子行高设置为 100%。它会起作用的！！

如果不行请回复！

例如：-

<div class="container-fluid">
<div class="row" style="height: 300px">
<div class="col-md-2 text-center align-self-center mh-100" style="background-color:red; height: 100%;">
30% Off
</div>
<div class="col-md-8">
<span class="badge badge-default">Promo Code</span>
<h3 style="font-size:20px;font-weight:700;">Lorem ipsum dolor sit amet.</h3>
<p style="font-size:12px;">Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor.</p>
</div>
<div class="col-md-2 text-center align-self-center">
<button class="btn blue-gradient btn-rounded btn-md">Get Code</button>
</div>
</div>
</div>

Bootstrap 将列高度拉伸到父级 DIV 高度

Bootstrap Stretch col Height upto Parent DIV Height

html

css

height

twitter-bootstrap