Question

我正试图将搜索栏置于页脚中心。使用以下解决方案后： Bootstrap NavBar with left, center and right aligned items我发现左侧按钮组的样式不再起作用了：当我将鼠标悬停在它们上面时，如果光标位于按钮中间，则不会应用hss的css：但是如果光标靠近边缘则应用。评论行位置：绝对修复问题，但当然搜索栏不再居中。这是一个微妙但令人讨厌的问题。

HTML：

<header>
<nav class="navbar navbar-default">
<a class="navbar-brand" href="#">Brand</a>
    <ul class="nav navbar-nav pull-left">
        <li><a href="#">
            <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
        </a></li>
        <li><a href="#">
            <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
        </a></li>
        <li><a href="#">
            <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
        </a></li>
    </ul>

    <form class="navbar-form" role="search">
        <div class="form-group">
            <input type="text" class="form-control input-sm" placeholder="Search">
            <button type="submit" id="navbar-search-button" class="btn btn-default btn-sm">
                <span class="glyphicon glyphicon-search" aria-hidden="true">
            </span>
        </button>
        </div>
    </form>

    <ul class="nav navbar-nav pull-right">
        <li><a href="#">
            <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
        </a></li>
        <li><a href="#">
            <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
        </a></li>
    </ul> 
</nav>
</header>

CSS：

header {
    background-color: #194969;
    border: 0;
}
.navbar {
    margin: 0 !important;
    padding: 0 !important;
    height: 3em !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: inherit !important;
}
.navbar .navbar-form {
    margin-top: 0.75em !important;
}
.navbar > a {
    color: #eee !important;
}
.navbar li > a {
    margin: 0 !important;
    background-color: #194969;
    color: #eee !important;
    width: 4em;
    text-align: center;
}
.navbar li > a:hover {
    border-radius: 0 0 0 0 !important;
    margin: 0 !important;
    color: #194969 !important;
    background-color: #eee !important;
    height: auto !important;
}
#navbar-search-button {
    color: #194969;
}
.navbar-form
{
    position: absolute;
    width: 100% !important;
    left: 0;
    text-align: center;
}

有问题的行是位置：绝对应用于.navbar-form。编辑：为了清晰起见屏幕截图：http://imgur.com/a/s71Qb。

Answer 1

尝试类似这样的事情，只需要处理现在的响应

https://jsfiddle.net/DTcHh/18138/

.form-header{
text-align: center; 
}

Answer 2

哦，天哪。首先，在CSS中将所有.navbar更改为.navbar-nav并尝试摆脱这些重要内容！

接下来，您的表单上的宽度偏离100％，这意味着该元素虽然不可见，但却掩盖了图标的中间位置，使其无法点击（因为您将鼠标悬停在表单上。）

所以，拿走你所有的<li>s或<a>s（不是两个，请。用一个测试并查看它是否有效）并放置一个位置：相对且可能z-index为2 。这应该将它们移到你绝对定位的元素之上。不要在位置上放置任何顶部，底部，左侧或右侧：相对元素。

如果你制作了一个codepen，我会为你做的。

位置：绝对搞砸a：悬停

2 个答案: