Как создать панель поиска с кнопкой поиска внутри нее, используя bootstrap? - PullRequest
Новая
       7

Как создать панель поиска с кнопкой поиска внутри нее, используя bootstrap?

0 голосов
/ 27 марта 2020

Я хочу создать панель поиска для моего проекта, в которой должна быть кнопка поиска, например: search bar with search button inside it

My HTML выглядит следующим образом: 

<section id="search-section">
      <div class="container-fluid">
          <h3 class="text-center pt-4">Search for Courses</h3>

          <div class="container-fluid text-center pt-3 outbox">
            <div class='row'>
                <div class='col'>
                    <form class='order-1'>
                        <input type="text" class='form-control d-inline'>
                        <button class='btn btn-md btn-primary d-inline'>Search</button>
                    </form>
                </div>
            </div>
        </div>

      </div>
  </section>

Используется соответствующий пользовательский CSS: 

#search-section form {
    border: 1px solid black;
    display: inline-block;
    width: 900px;
    padding-bottom:55px;
    border-radius: 5px;
    background-color:white;
    height:50px;
    box-shadow: 3px 4px 4px rgba(0, 0, 0, .13);


}

#search-section input[type='text'] {
    width:800px;
    height:50px;
    border:none;
}
#search-section button {
    margin-left:10px;
    margin-right:5px;
}

.outbox {
    height: 500px;
}
.form-control:active,
.form-control:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

Проблема с моим кодом заключается в том, что он хорошо работает на больших экранах, но выходит за пределы экрана для устройства с небольшим экраном. Я хочу сделать так, чтобы в случае маленьких экранов панель поиска была расположена сверху кнопки поиска.

1 Ответ

1 голос
/ 27 марта 2020

Вы можете свести к минимуму пользовательские CSS (не устанавливая stati c widths), а затем использовать отзывчивые утилитные классы , чтобы расположить ввод для поиска и кнопку ... 

<section id="search-section">
    <div class="container-fluid">
        <h3 class="text-center pt-4">Search for Courses</h3>
        <div class="container-fluid text-center pt-3 outbox">
            <div class='row'>
                <div class='col-lg-8 col-md-10 col-sm-11 mx-auto'>
                    <form class='order-1 d-flex flex-sm-row flex-column align-items-center'>
                        <input type="text" class='border-0 form-control h-100 mt-2 mt-sm-0'>
                        <button class='btn btn-primary mr-sm-1 mt-4 mt-sm-0 flex-fill'>Search</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

#search-section form {
    border: 1px solid black;
    border-radius: 5px;
    background-color: white;
    height: 50px;
    box-shadow: 3px 4px 4px rgba(0, 0, 0, .13);
}

.outbox {
    height: 500px;
}

.form-control:active,
.form-control:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

https://codeply.com/p/Zl0wdGhJVH

...