html - 如何在 Bootstrap 3 中使导航栏元素具有固定宽度

Question

我正在尝试制作一个类似于此页面上的导航栏:

http://wrapbootstrap.com/preview/WB0375140

我使用的是 Bootstrap 3，可以很容易地创建底部带有轻微渐变的顶 Angular 圆框。

我正在努力解决的问题是，无论其中的文本有多宽，该示例中导航栏中的菜单项的宽度都是相同的。

我绞尽脑汁想知道这是如何做到的 - 非常感谢这些想法。

Answer 1

您必须将 css 宽度属性添加到导航栏中的所有元素。

假设你的导航栏是这样的:

<div id="myCustomNavbar">
    <ul>
        <li class="active">Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

您应该使用 CSS 添加一些样式:

#myCustomNavbar > ul > li
{
    width: 100px !important;
}

请记住，您始终可以右键单击您感兴趣的元素(在示例网页中)，然后单击检查元素。在那里你可以看到应用到该元素的所有 html 标记和 CSS 样式