Question

我一直在尝试使用bootstrap的导航栏，但似乎它做错了，导航栏看起来像这样（即使在宽屏幕上）

代码如下

while True:
    try:
        userInputMonth = int(input("Please enter a valid month:"))
    except ValueError:
        print("Please provide a numeric input for the month. Try again...")
    else:
        break

while True:
    try:
        userInputDay = int(input("Please enter a valid day:"))
    except ValueError:
        print("Please provide a numeric input for the day:")
    else:
        break

while True:
    try:
        userInputYear = int(input("Please enter a valid two-digit-year:"))
    except ValueError:
        print("Please provide a numeric input for the year.")
    else:
        break

有趣的是我在bootstrap文档上使用完全相同的示例代码，它应该看起来像这样

我确实将颜色和文字更改为右边但除此之外，一切都是相同的，有关正在发生的事情的任何建议吗？

Answer 1

您忘记添加navbar-expand-sm类（或-md或-lg，具体取决于您要定位的断点）

Bootply ：https://www.bootply.com/RVELYbOueA

HTML ：

<nav class="navbar navbar-toggleable-xs navbar-expand-sm sticky-top navbar-dark bg-dark">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Test</a>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">
                    Dropdown link
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

Bootstrap导航栏行为

1 个答案: