Как добавить HTML-форму в середине Jumbotron с помощью начальной загрузки 4.1? - PullRequest
Новая
       15

Как добавить HTML-форму в середине Jumbotron с помощью начальной загрузки 4.1?

0 голосов
/ 29 октября 2018

Я пытаюсь использовать twitter-Bootstrap 4.1 для создания сайта. У меня есть джумботрон с фоновым изображением, занимающий 75% экрана сверху. Внизу у меня есть текстовые блоки, как показано в следующем фрагменте кода https://www.codeply.com/go/NnUx8ZDmyz

Однако у меня есть следующие проблемы с ним. На моем экране кнопка «Поиск» торчит из контейнера / карты (прозрачный / серый блок). Кроме того, при изменении размера окна просмотра на размер планшета / телефона ситуация ухудшается, поскольку форма перекрывается с текстом ниже.

Вот скриншот того, как форма не отцентрирована и кнопка торчит. enter image description here

Вот скриншот того, как форма поиска пересекается с текстом ниже.

enter image description here

ОБНОВЛЕНО

Вот фрагмент кода, в котором устранены вышеуказанные проблемы. Однако окно поиска теперь смещено к вершине жумботрона, а не к середине. https://www.codeply.com/go/LjMrId9guW

enter image description here

Ответы [ 2 ]

0 голосов
/ 29 октября 2018

Вы должны использовать 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

0 голосов
/ 29 октября 2018

Кнопка поиска торчит, потому что она больше контейнера 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)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...