悬停效果未到达网页末尾

Question

我制作了一个 Boostrap 菜单栏，当您将浏览器折叠到很小时它会出现，我在按钮上放置了悬停效果但它们并没有完全触及浏览器的两侧，我如何让它到达结束？

https://bluemints000.github.io/

https://github.com/BlueMints000/BlueMints000.github.io

Answer 1

bootstrap就是这样，很正常。如果您检查元素并单击带有 class:navbar-collapse collapse 的 dive，您会看到那里有一些 padding left 和 padding right，这使得它不会接触到两侧。

<div id="collapsable-nav" class="navbar-collapse collapse in" aria-expanded="true" style="">

    <ul id="nav-list" class="nav navbar-nav navbar-right">
    <li class="visible-xs text-center"></li>
    <li class="visible-xs text-center"><a href="#">Chicken</a></li>
    <li class="visible-xs text-center"><a href="#">Beef</a></li>
    <li class="visible-xs text-center"><a href="#">Sushi</a></li>
    </ul>

</div>

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #e7e7e7;
}
.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
    margin-right: -15px;
    margin-left: -15px;
}

.navbar-collapse.in {
    overflow-y: auto;
}
.collapse.in {
    display: block;
}
.navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
}

悬停效果未到达网页末尾

Hover effect not reaching the ends of webpage

css

twitter-bootstrap-3