时间戳

首页 > 解决方案 > 如何使用 bootstrap 4.1 在 jumbotron 中间添加一个 html 表单？

html - 如何使用 bootstrap 4.1 在 jumbotron 中间添加一个 html 表单？

问题描述

我正在尝试使用 twitter-Bootstrap 4.1 创建一个网站。我有一个带有背景图像的超大屏幕，它占据了顶部屏幕的 75%。在底部，我有如下代码片段所示的文本块https://www.codeply.com/go/NnUx8ZDmyz

但是，我有以下问题。在我的屏幕上，“搜索”按钮伸出容器/卡片（透明/灰色块）。此外，当您将视口更改为平板电脑/手机大小时，由于表单与下面的文本重叠，它会变得最糟糕。

这是表单未居中且按钮突出的屏幕截图。 在此处输入图像描述

这是搜索表单如何与下面的文本重叠的屏幕截图。

在此处输入图像描述

更新

这是修复上述问题的代码片段。但是，搜索框现在移到了 jumbotron 的顶部而不是中间。 https://www.codeply.com/go/LjMrId9guW

在此处输入图像描述

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

你应该min-height:75%改用

.mh-75 {
    min-height: 75%;
}

而不是pr-0 pl-0只no-gutters在行上使用...

<div class="jumbotron jumbotron-fluid intro-jumbotron mh-75 clearfix" id="images_show_case">
    <div class="container h-100 d-flex">
        <div class="my-auto">
            <div class="card card-intro-search">
                <div class="card-body text-center">
                    <h3 class="text-uppercase">discover real estate in</h3>
                    <h1 class="text-uppercase font-weight-bold">My City</h1>
                    <form method="get" action="/Listing/Search">
                        <div class="row no-gutters">
                            <div class="col-lg-3">
                                <select class="form-control form-control-lg" data-val="true" data-val-required="The Value field is required." id="Search_Type_Value" name="Search.Type.Value">
                                    <option value="">Select an option</option>
                                    <option value="CommercialLease">Commercial Lease</option>
                                    <option value="Commerical">Commerical</option>
                                    <option value="LotsAndLand">Lots and Land</option>
                                    <option value="Rental">Rental</option>
                                    <option selected="selected" value="Residential">Residential</option>
                                    <option value="ResidentialIncome">Residential Income</option>
                                </select>
                                <label class="control-label search-label" for="Search_Type">Property Type</label>

                            </div>
                            <div class="col-lg-2">
                                <input type="number" class="form-control form-control-lg" data-val="true" data-val-number="The field Min Price must be a number." data-val-range="The field Min Price must be between 0 and 9999999." data-val-range-max="9999999" data-val-range-min="0" data-val-required="The Min Price field is required."
                                id="Search_MinPrice" name="Search.MinPrice" value="200000">
                                <label class="control-label search-label" for="Search_MinPrice">Min Price</label>

                            </div>
                            <div class="col-lg-2">
                                <input type="number" class="form-control form-control-lg" data-val="true" data-val-number="The field Max Price must be a number." data-val-range="The field Max Price must be between 0 and 9999999." data-val-range-max="9999999" data-val-range-min="0" data-val-required="The Max Price field is required."
                                id="Search_MaxPrice" name="Search.MaxPrice" value="500000">
                                <label class="control-label search-label" for="Search_MaxPrice">Max Price</label>

                            </div>
                            <div class="col-lg-1">
                                <input type="number" class="form-control form-control-lg" data-val="true" data-val-range="The field Min Beds must be between 0 and 100." data-val-range-max="100" data-val-range-min="0" id="Search_MinBedrooms" name="Search.MinBedrooms" value="3">
                                <label class="control-label search-label" for="Search_MinBedrooms">Min Beds</label>

                            </div>
                            <div class="col-lg-1">
                                <input type="number" class="form-control form-control-lg" data-val="true" data-val-range="The field Min Baths must be between 0 and 100." data-val-range-max="100" data-val-range-min="0" id="Search_MinBathrooms" name="Search.MinBathrooms" value="2">
                                <label class="control-label search-label" for="Search_MinBathrooms">Min Baths</label>

                            </div>
                            <div class="col-lg-2">

                                <select class="form-control form-control-lg" id="Search_City_Id" name="Search.City.Id">
                                    <option value="">Any City</option>
                                    <option value="6">A</option>
                                    <option value="7">B</option>
                                    <option value="8">C</option>
                                    <option value="3">D</option>
                                    <option value="1">E</option>
                                    <option value="2">F</option>
                                </select>
                                <label class="control-label search-label" for="Search_City">City</label>
                            </div>
                            <div class="col-lg-1 text-left">
                                <button type="submit" value="Search" class="btn btn-primary btn-lg">
                                    <span class="fas fa-filter"></span> Search
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/avwMFtM5Cd

推荐阅读