代码之家 › 专栏 › 技术社区 › Junior

如何使用bootstrap4.1在jumbotron中间添加html表单?

bootstrap-4 twitter-bootstrap css html

Junior · 技术社区 · 7 年前

我正在尝试使用twitter Bootstrap4.1来创建一个网站。我有一个背景图像,占75%的屏幕上的顶部。在底部,我有如下代码片段所示的文本块 https://www.codeply.com/go/NnUx8ZDmyz

但是,我有以下问题。在我的屏幕上,“搜索”按钮伸出容器/卡片(透明/灰色块)。另外,当您将视口更改为平板电脑/手机大小时,由于窗体与下面的文本重叠,情况会变得更糟。

这里是一个屏幕截图的形式是如何不居中和按钮是突出的。

更新

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

2 回复 | 直到 7 年前

Barnee Emily 7 年前

搜索按钮突出是因为它比容器大 col-lg-1 .
要解决移动/平板电脑屏幕上的重叠问题,您必须覆盖或删除 h-75 上课地点: jumbotron jumbotron-fluid intro-jumbotron h-75 clearfix .

我已经清理了你的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 班级。

解决方案更新
添加到jumbotron 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">

pl-0 pr-0 您可以使用: px-0 (x轴上的填充=0)

Carol Skelly 7 年前

你应该使用 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