Question

我正在尝试使用bootstrap4将内容放在card flexbox中。我有以下代码：

<html>
<head>
    <title>Test Page</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>


    <style>
/*      body {
            background-color: #CCCCCC;
        }
*/      .alert-box {
            border-radius: 20px;
        }
    </style>
</head>

<body class="bg-secondary"> 
    <div class="container h-100 d-flex justify-content-center align-items-center">
        <div class="col-6 text-center">
            <div class="card h-50 alert-box d-flex flex-column justify-content-center">
                <div class="card-body">
                    Page <code>not</code> found
                </div>
            </div>
        </div>
    </div>
</body>
</html>

我在做什么错了？

使用flexbox在bootstrap 4卡中居中的内容不起作用

0 个答案: