jquery - 阻止 bootstrap 3 在导航栏按钮的末端创建填充

Question

我正在为我的网站构建一个可折叠的导航栏(在 bootstrap 3 中)。导航栏本身工作得很好，但我注意到 Bootstrap 从每个 li 标签中创建了一个“ block ”之类的东西。我意识到它需要这样做，所以当导航折叠时，每个链接都有全宽 block ，用户可以点击。我的问题是，由于这些“ block ”在两边都是相等的，所以我无法将菜单文本与容器的边缘完美对齐。我尝试删除主页按钮的左侧填充和联系人按钮的右侧填充，但没有成功。对于 768 像素及以上的屏幕，我主要只需要这个，因为这些尺寸的导航不会折叠。

简而言之，我需要菜单文本在它下面的容器的开头和结尾对齐。这是一个 Bootstrap :

http://bootply.com/112029

如有任何关于如何解决此问题的建议，我们将不胜感激!

Answer 1

不确定为什么要这样做，因为如果将鼠标悬停在导航链接上，您可以看到它们与正文容器完美对齐。但是如果您仍然想这样做，可以将自定义类添加到导航的容器中，我们称它为 .custom-cont，然后使用它。

@media (min-width: 768px)
.custom-cont {
width: 84%;
}

Bootply

虽然它使您的文本与正文容器对齐，但您可以注意到悬停时的效果。