Блог

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

Это HTML и CSS:

 lt;!-- Bootstrap nav bar! :D --gt; lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"gt;  lt;a class="navbar-brand" href="index.html"gt;  lt;img src="Fernando Borea - Logo.png" alt="" class="d-inline-block align-top headerLogo"gt;  lt;/agt;    lt;!-- Folded nav bar button when small screen:B --gt;  lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"gt;  lt;span class="navbar-toggler-icon"gt;lt;/spangt;  lt;spangt;Menult;/spangt;  lt;/buttongt;    lt;!-- Nav bar itself! --gt;   lt;div class="collapse navbar-collapse" id="navbarSupportedContent"gt;  lt;ul class="navbar-nav mr-auto"gt;  lt;li class="nav-item active"gt;  lt;a class="nav-link" href="#home-cats"gt;Cats!lt;/agt;  lt;/ligt;  lt;li class="nav-item active"gt;  lt;a class="nav-link" href="#home-cars"gt;Carslt;/agt;  lt;/ligt;  lt;li class="nav-item active"gt;  lt;a class="nav-link" href="#home-business"gt;Businesslt;/agt;  lt;/ligt;    lt;li class="nav-item dropdown"gt;  lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"gt;  Extended pages  lt;/agt;    lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"gt;  lt;a class="dropdown-item" href="#"gt;Cats!lt;/agt;  lt;a class="dropdown-item" href="#"gt;Sportslt;/agt;  lt;a class="dropdown-item" href="#"gt;Businesslt;/agt;  lt;div class="dropdown-divider"gt;lt;/divgt;  lt;a class="dropdown-item" href="#"gt;Cat Trivia!! :Dlt;/agt;  lt;/divgt;  lt;/ligt;  lt;/ulgt;    lt;form class="form-inline my-2 my-lg-0"gt;  lt;input class="form-control mr-sm-2 large-input quick-google ml-auto" type="search" placeholder="Wanna google somethin'?" aria-label="Search"gt;  lt;button class="btn btn-outline-success my-2 my-sm-0" type="submit"gt;Google dis' plslt;/buttongt;  lt;/formgt;  lt;/divgt; lt;/navgt;  

Что касается CSS, я хотел, чтобы строка поиска была достаточно длинной, чтобы соответствовать владельцу места, поэтому я использую для нее CSS минимальной ширины. Я прочитал, что ширина:100% может помочь, но в моем случае это не помогло.

 /* CSS for the image */ .headerLogo {  max-width: 200px;  height: auto; }  .quick-google {  min-width: 250px;  width: 100%; }  

Визуальные ссылки на текущий код:

Текущий вид строки поиска при сворачивании. Я хочу, чтобы он занял всю ширину

Текущий вид, когда он не свернут. Я хочу, чтобы все было так, как оно есть прямо здесь

Я новичок в веб-разработке, поэтому, если возможно, я был бы очень признателен за краткое объяснение того, как будет работать решение этой проблемы 🙂

Я думаю, что вы пытаетесь изменить CSS элемента начальной загрузки, попробуйте использовать !важный тег с именем класса ,

 .quick-google {  min-width: 250px;  width: 100% !important; }