该类未应用于 div 内的所有 div答案

【问题标题】：The class is not being applied to all the divs inside the div该类未应用于 div 内的所有 div
【发布时间】：2021-04-01 21:15:37
【问题描述】：

您将在下面找到我的 HTML 代码：

<?php

require_once("../RMS/php/component.php")

?>


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

<head>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styleroles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Roles</title>
</head>

<body>
    <main>
        <div class="container text-center">
            <h1 class="py-4 bg-dark text-light rounded"><img src="https://www.flaticon.com/premium-icon/icons/svg/2211/2211680.svg" alt=""> Roles</h1>

            <div class="d-flex  justify-content-center">
                <form action="" method="post" class="w-50">
                    <div class="pt-2">
                        <?php inputElement("<i class='fas fa-id-badge fa-2x'></i>", "ID", "id", "");  ?>
                    </div>

                    <div class="pt-2 ">
                        <?php inputElement("<i class='fas fa-user-tie fa-2x'></i>", "Role", "role_name", "");  ?>
                    </div>



                </form>
            </div>
        </div>

    </main>




</body>

</html>

代码的输出：

我希望角色文本框作为 ID 文本框位于中心。
只有 ID 文本框居中对齐。
甚至角色文本框 div 也在该 div 内。
但是 justify-content-center 只是应用于 ID 文本框。
我希望两个文本框都对齐到中心。
为什么会这样？
我期待您提出任何解决方案。
谢谢。

【问题讨论】：

标签： php html css bootstrap-4

【解决方案1】：

这就足够了：

<body>
    <div class="container">
        <h1 class="py-4 bg-dark text-light rounded" style="object-fit: cover;"><img
                src="https://www.flaticon.com/premium-icon/icons/svg/2211/2211680.svg" alt=""> Roles</h1>

        <!-- <div class="d-flex  justify-content-center"> -->
        <form action="" method="post">
            <div class="row">
                <div class="col-4">

                </div>
                <div class="col-4 pt-2">
                    <i class='fas fa-id-badge fa-2x'></i><input type="text">
                </div>

                <div class="col-4">

                </div>
            </div>
            <div class="row">
                <div class="col-4">

                </div>
                <div class="col-4  pt-2 ">
                    <i class='fas fa-user-tie fa-2x'></i><input type="text">
                </div>


                <div class="col-4">

                </div>
            </div>
    </div>


    </form>
    <!-- </div> -->
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>

看到它的工作：https://jsfiddle.net/p8v3ownm/

【讨论】：

@itslavanya 我已经附上了它在小提琴中的工作。缺少什么？它在中心。
@itslavanya 看小提琴
@itslavanya 你可以给它一个绿色的勾！