18910140161

html-当父行宽度减小时,如何防止引导列折叠为新行?-堆栈溢出

顺晟科技

2022-10-19 13:35:16

149

<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'输入的列正在折叠为新行。是否有一种方法可以减少“窗体”宽度,以便两列(包含ids为#lastname和#firstname的输入)用窗体宽度减少其宽度,而不是折叠为新行。


顺晟科技:

您需要将。w-100类添加到#lastname和#firstname。但是,应该检查引导表单类,如。form-control

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航