我正在为我的网站构建一个可折叠的导航栏（在bootstrap 3中）。导航栏本身很好用，但我注意到bootstrap会在每个li标签中创建一个“块”类的东西。我意识到它需要这样做，所以当导航器折叠时，每个链接都有全宽度的块，用户可以点击它们。我的问题是，由于这两个“块”在两边是相同的，我无法将我的菜单文本与容器的边缘完美地排列在一起。我试图从“联系人”按钮中删除“主页”按钮和右侧填充的左侧填充，但没有成功。我主要只需要768px及以上的屏幕，因为这些尺寸的导航没有折叠。
在坚果壳中，我需要菜单文本在容器的开头和末尾排成一行。这是一个bootply：
非常感谢任何有关如何解决这个问题的建议！
答案 0 :(得分：1)
不确定为什么要这样做，因为如果将鼠标悬停在导航链接上，则可以看到它们与主体容器完全对齐。但如果您仍想这样做，则可以向导航容器添加自定义类，让我们称之为.custom-cont，然后使用它。
@media (min-width: 768px)
.custom-cont {
width: 84%;
}
尽管它将您的文本与正文容器对齐，但您可以注意到对悬停的影响。