html - 当父级宽度减小时，如何防止引导列折叠到新行？

Question

<div class="col">
            <div class="alert alert-danger display-error pt-3 pb-0 mb-0 mt-0" style="display: none"></div>
            <h2 class="d-flex justify-content-center pt-4" style="font-family: Poppins-Regular;font-size: 30px;color: #333333;line-height: 1.2;">Send Us a Message</h2>
            <form class="px-5" action="insert.php" id="cform" method="POST">
                <div class="container px-4 pt-3">
                    <div class="row border">
                        <div class="row border mx-0 px-0">
                            <label class="mx-0 ps-2 d-flex align-items-center itemname" for="name-input">TELL US YOUR NAME *</label>
                        </div>
                        <div class="row border mx-0 px-0">
                            <div class="col mx-0 px-0 border-end">
                                <input id="firstName" name="firstName" class="border-0 ps-2" style="height: 55px" type="text" placeholder="First name" />
                            </div>
                            <div class="col mx-0 px-0 border-start">
                                <input id="lastName" name="lastName"  class="border-0 ps-2" style="height: 55px" type="text" placeholder="Last name" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container pt-3 px-4">
                    <div class="row border">
                        <div class="row border mx-0 px-0">
                            <label class="mx-0 ps-2 d-flex align-items-center itemname" style="height: 55px" for="name-input">ENTER YOUR EMAIL *</label>
                        </div>
                        <div class="row border mx-0 px-0">
                            <div class="col mx-0 px-0">
                                <input id="email" name="email" class="border-0 ps-2 w-100" style="height: 55px" type="text" placeholder="Eg. example@email.com" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container pt-3 px-4">
                    <div class="row border">
                        <div class="row border mx-0 px-0">
                            <label class="mx-0 ps-2 d-flex align-items-center itemname" for="name-input">ENTER PHONE NUMBER</label>
                        </div>
                        <div class="row border mx-0 px-0">
                            <div class="col mx-0 px-0">
                                <input  id="phoneNumber" name="phoneNumber" class="border-0 ps-2 w-100" style="height: 55px" type="text" placeholder="Eg. +1 800 000000" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container pt-3 px-4">
                    <div class="row border">
                        <div class="row border mx-0 px-0">
                            <label class="mx-0 ps-2 d-flex align-items-center itemname" for="name-input">MESSAGE *</label>
                        </div>
                        <div class="row border mx-0 px-0">
                            <div class="col mx-0 px-0">
                                <input  id="message" name="message" class="border-0 ps-2 w-100" style="height: 150px" type="text" placeholder="Write us a message" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-center pt-4">
                    <button id="submit" type="submit" name="submit" style="background: #00ad5f;border-radius: 2px;min-width: 200px;height: 50px;font-family: Montserrat-Bold;font-size: 12px;color: #fff;line-height: 1.2;text-transform: uppercase;outline: none;border: none;">SEND MESSAGE</button>
                </div>
            </form>
        </div>

我试图通过使用“px-5”在表单的两侧添加填充来减小表单的宽度。但是，当我这样做时，包含“#lastName”输入的列将折叠到新行。有没有一种方法可以减小“表单”宽度，以便两列（包含 ID 为 #lastName 和 #firstName 的输入）随着表单宽度减小其宽度而不折叠到新行。

Answer 1

您需要将 .w-100 类添加到#lastName 和#firstName。但是，您应该检查引导表单类，例如 .form-control