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

Question

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

但是，我遇到了以下问题。在我的屏幕上，“搜索”按钮伸出容器/卡片(透明/灰色 block )。此外，当您将视口(viewport)更改为平板电脑/手机尺寸时，情况会变得更糟，因为表单与下面的文本重叠。

下面是表单未居中且按钮突出的屏幕截图。

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

---

已更新

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

Answer 1

搜索按钮突出是因为它比容器 col-lg-1 大。
要解决手机/平板电脑屏幕上的重叠问题，您必须覆盖或删除 jumbotron jumbotron-fluid intro-jumbotron h-75 clearfix 中的 h-75 类。

我已经稍微清理了您的 HTML 代码:

  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">MySite</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav mr-auto">
                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="/Home/About">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="/Home/Contact">Contact</a></li>
                </ul>
                

    <ul class="nav navbar-nav navbar-right">
        <li class="nav-item"><a class="nav-link" href="/Identity/Account/Register">Register</a></li>
        <li class="nav-item"><a class="nav-link" href="/Identity/Account/Login">Login</a></li>
    </ul>

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

    



    

    <div class="jumbotron jumbotron-fluid intro-jumbotron  clearfix" id="images_show_case">


        <div class="container h-100 d-flex">

            <div class="my-auto w-100">
                <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 mx-0">
                                <div class="col-lg-3 px-0">
                                    <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-3 px-0">
                                    <div class="row mx-0">

                                        <div class="col-lg-6 px-0">
                                            <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-6 px-0">
                                            <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>
                                </div>

                                <div class="col-lg-1 pl-0 pr-0">
                                    <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 pl-0 pr-0">
                                    <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 pl-0 pr-0">

                                    <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-2 px-0 text-left ">
                                    <button type="submit" value="Search" class="btn btn-primary btn-lg w-100">
                                        <span class="fas fa-filter"></span> Search
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
    
    
    <div class="container-fluid body-content">
<div class="row">

    <div class="col-xs-12 col-sm-6 col-lg-4">
        <h2>Lorem</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    
    <div class="col-xs-12 col-sm-6 col-lg-4">
        <h2>Lorem</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>


    <div class="col-xs-12 col-sm-6 col-lg-4">
        <h2>Lorem</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

</div>
    </div>

我将最低和最高价格移至 col-3 中。现在搜索按钮包装器可以有一个 col-2 类。

---

更新的解决方案:
添加到大屏幕 d-flex，从其子级中删除 d-flex 并添加 align-self-center。

 <div class="jumbotron jumbotron-fluid intro-jumbotron mh-75 clearfix d-flex" id="images_show_case">
 <div class="container h-100 align-self-center">

提示:您可以使用:px-0(x 轴上的填充 = 0)来代替 pl-0 pr-0/p>