Bootstrap，使搜索栏在折叠导航栏时占据全宽

Question

我正在完成一项关于创建网站的作业。我想让导航栏中包含的搜索栏在折叠导航栏时占据全宽，但在不折叠时不影响视觉效果。

这是HTML和CSS:

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

关于 CSS，我希望搜索栏足够长以适合占位符，这就是我使用最小宽度 CSS 的原因。我读到 width:100% 可以提供帮助，但对我来说没有帮助。

/* CSS for the image */
.headerLogo
{
  max-width: 200px;
  height: auto;
}

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

当前代码的可视化引用：

折叠时搜索栏的当前外观。我想让它全宽

未折叠时的当前外观。我想要它就在那里

我是网络开发的新手，所以如果可能的话，我很感激能快速解释一下这个解决方案是如何工作的:)

Answer 1

我认为您正在尝试更改 bootstrap 元素的 CSS 尝试使用带有 class 名称的 !important 标签，

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

Bootstrap，使搜索栏在折叠导航栏时占据全宽

Bootstrap, make search bar take full width when nav-bar is collapsed

html

css

cs50