Question

问题背景：

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

enter image description here

代码：

这是我对菜单的标记。

            <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属性。

因此，如果你只想扩展那些线而不是包括掩模在内的整个元素，你可以删除它们并在元素的上方和下方创建新的水平标尺。您必须自己设置样式，并确保他们有width 100%。您可以通过将此规则添加到自定义CSS（应该在引导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类，以便项目中此类的所有实例都将更改。如果您只想在这个实例中使用chage元素，请为其指定ID或唯一类，并将其用作此规则的选择器。

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

1 个答案: