html - Bootstrap - 折叠时删除水平导航栏线

Question

问题背景:

我有一个导航栏，其中包含 3 个元素的列表，最后是一个带有输入按钮的搜索框。如下图所示，当菜单折叠时，搜索框和按钮上方和下方有 2 条水平线，它们仅部分延伸到菜单中。我希望他们扩大整个宽度。目前我在 CSS 中看不到在哪里调整这些行？

代码:

这是我的菜单标记。

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <form role="form" class="form-inline">
                    <div class="form-group">
                        <ul class="nav navbar-nav">
                            <li><a href="@Url.Action("AllCatagories", "Catagory", new { id = 0})" class="scroll-link" data-id="myCarousel">Products</a></li>
                            <li><a href="@Url.Action("ViewCartContents", "Cart")" class="scroll-link" data-id="Welcome">Cart</a></li>
                            <li><a href="@Url.Action("ContactUs", "Contact")" class="scroll-link" data-id="features">Contact</a></li>
                        </ul>
                    </div>

                    <div class="input-group navbar-form navbar-right ">
                        <input type="text" class="form-control searchInput" name="searchTerm" placeholder="Search this site..." id="searchInput">
                        <button type="submit" value="click" class="btn btn-default searchBtn form-inline"><span class="glyphicon glyphicon-search"></span></button>
                    </div>

                    <div class="navbar-form navbar-right hidden-sm hidden-xs">
                        @Html.Action("MiniCart", "Cart")
                    </div>
                </form>
            </div>

Answer 1

您要查找的元素是 .navbar-form 并且这些行来自 (webkit-)box-shadow 属性

因此，如果您只想扩展这些线而不是整个元素(包括 mask )，您可以移除它们并在元素上方和下方创建新的水平标尺。您必须自己设置样式，并确保它们的 width 为 100%。您可以通过将此规则添加到您的自定义 CSS(应在 Bootstrap CSS 之后加载)来删除内置行(box-shadow):

.navbar-form {
webkit-box-shadow: inset 0 0 0 rgba(255,255,255,.1),0 0 0 rgba(255,255,255,.1);
box-shadow: inset 0 0 0 rgba(255,255,255,.1),0 0 0 rgba(255,255,255,.1);
}

如果您想扩展行并且不介意包括其内容在内的整个元素也被扩展，您只需将此规则添加到您的自定义 CSS 中，而不必更改标记中的任何内容:

.navbar-form {
width: 100%;
}

请注意，在这两种情况下，您都在修改整个 .navbar-form 类，因此您元素中此类的所有实例都将发生变化。如果您只想改变这个实例中的元素，请为其指定一个 ID 或唯一类，并将其用作此规则的选择器。