如何防止引导列在父列的宽度减小时折叠到新行？

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‘输入的列将折叠为一个新行。有没有一种方法可以减小' form‘的宽度，使两列(包含Is为#lastName和#firstName的输入)的宽度随着窗体的宽度而减小，而不会折叠成新的一行。

​

Answer 1

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