Question

我想为我的页脚使用导航，就像它如何被用作默认ASP.NET MVC应用程序的标准菜单一样。造型看起来不错，它对我来说很有意义，所以坚持这种配置会很棒。如何在不修改CSS的情况下将其置于中心位置？我担心的是，由于标题也使用class="nav navbar-nav"，如果我将nav CSS调整为text-align:center;，则会导致页面顶部的主菜单混乱。有什么建议吗？

注意：我知道我以前使用类似style="text-align:center;"之类的东西证明了我的主导航栏菜单项，但我记不起来了。

<footer>
        <div class="container-fluid"> //Necessary?
            <div class="row">  //Necessary?
                <div class="col-md-12">  //Necessary?
                        <ul class="nav navbar-nav" style="text-align:center;">  //Trying to adjust the style to center align
                            <li class="dropdown">
                                <a class="dropdown-toggle" role="button" aria-expanded="false" href="#" data-toggle="dropdown">Home <span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li>@Html.ActionLink("Item 1", "Index", "Home", protocol: null, hostName: null, fragment: "item1", routeValues: null, htmlAttributes: null)</li>
                                    <li>@Html.ActionLink("Item 2", "Index", "Home", protocol: null, hostName: null, fragment: "item2", routeValues: null, htmlAttributes: null)</li>
                                    <li>@Html.ActionLink("Item 3", "Index", "Home", protocol: null, hostName: null, fragment: "item3", routeValues: null, htmlAttributes: null)</li>
                                </ul>
                            </li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                        </ul>
                </div>
            </div>
        </div>
</footer>

编辑：

我发现在<ul>标记中执行以下操作会创建基本导航栏的外观

<ul class="nav navbar-nav">

此外，有navbar-left和navbar-right类可以向左或向右对齐导航栏，但没有中心。有关创建navbar-center的任何建议吗？

Answer 1

如果您可以访问您的CSS，

from rsonlite import loads, simpleparse


mystring = '''
node1:
    node1
    node2:
        node1
node2:
    node1
    node2
    node3:
        node1:
            node1
        node2:
            node1
            node2
'''

def fixup(node):
    if isinstance(node, str):
        return node
    elif isinstance(node, dict):
        for key in node:
            assert key.endswith(':'), key
        return dict((key[:-1], fixup(value)) for key, value in node.items())
    else:
        assert isinstance(node, (list, str))
        result = {}
        for item in node:
            if isinstance(item, str):
                assert not item.endswith(':')
                assert result.setdefault(item, None) is None
            else:
                for key, value in fixup(item).items():
                    assert result.setdefault(key, value) is value
        return result

print('')
print(loads(mystring))
print('')
print(simpleparse(mystring))
print('')
print(fixup(simpleparse(mystring)))
print('')

或来自html

footer ul li {
text-align:center;
}

Fiddle

Answer 2

试试这个代码？将div的宽度设置为导航栏的宽度<div class="col-md-12" style="margin-left:auto;margin-right:auto;width:___;">

如何居中对齐导航栏

2 个答案: