将菜单项展开为最大宽度引导程序

-2

我有一个顶部导航栏和html文件中的一些内容。问题是菜单项在屏幕中间，就像在这个简单的表示中一样：将菜单项展开为最大宽度引导程序

%%%% item 1 %% item 2 %% item 3 %% item 4 %% item 5 %% %%

其中％表示空间。当我把内容放在html中时，它不会在左侧或右侧与导航栏对齐。例如，文本在两边都会出现边界，但只是在视觉上。问题是菜单项是一些单元格，里面的文本是居中的，所以它在左侧和右侧都有一些空间，这就是为什么当我使用容器时，html中的文本看起来不对齐。有没有办法扩展项目文本以填充单元格的最大长度，或者使单元格与文本的大小完全吻合，以解决问题？

请参阅图片以更好地理解问题。

来源

2017-09-23 AMayer

请包括[最小，完整的，并且可验证示例]（https://stackoverflow.com/help/mcve）。我们不介意读者，如果您不显示给我们，我们无法帮助您修复您的代码！ – FluffyKitten

那么，我正在使用这个框架和CSS有20.000行代码。我不知道如何隔离只影响导航栏的部分，所以我可以发布它。 – AMayer

或者，您可以使用https://jsfiddle.net/来制作代码示例并在您的问题中嵌入链接。 –

我假设你使用的自举（但我不会读心术）。我希望能够正确理解你的问题。

如果您使用的自举提出了一个预定义模板，你可能有这样的事情来表示你的导航栏：

<ul class="nav navbar-nav"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a href="#">Page 1</a></li> 
    <li><a href="#">Page 2</a></li> 
    <li><a href="#">Page 3</a></li> 
</ul>

锚标记上有设置默认参数，你需要的，如果要覆盖这些参数你自己的参数。在你的情况下，你需要通过将其设置为0px来删除左侧和右侧填充。

<ul class="nav navbar-nav"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a style="padding-left: 0px; padding-right: 0px" href="#">Page 1</a></li> 
    <li><a style="padding-left: 0px; padding-right: 0px" href="#">Page 2</a></li> 
    <li><a style="padding-left: 0px; padding-right: 0px" href="#">Page 3</a></li> 
</ul>

您可以创建一个css类来拥有更清晰的代码。

其结果将是类似this

来源

2017-09-23 13:46:56

谢谢！有用。 – AMayer

将菜单项展开为最大宽度引导程序

回答

相关问题