Question

我正在尝试在bootstrap 4（beta）导航栏组件中创建标头。导航栏卡在移动设备中，汉堡包显示下拉菜单...但我在桌面上，所以我希望它显示为页面顶部的普通导航栏

https://v4-alpha.getbootstrap.com/components/navbar/

这是一个简单的项目，仅包含标题的代码并具有相同的问题

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>test</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />


    <script src="https://code.jquery.com/jquery-3.2.1.js"
        integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
        crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <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="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

使用index.html显示我的导航栏的浏览器

任何人都知道这是什么问题？

我在VM和桌面上测试过，两者都有同样的问题...... 我的屏幕分辨率是1920x1080 NavBar宽度为1920

我有点失落......

Answer 1

我相信我已经解决了你的问题，在控制台中导航栏正在“flexbox-direction：column”中呈现我已经移动了代码添加了一个内联样式，如果你愿意的话应该很容易移动到CSS 。如果您想要确切的示例，则需要更多的CSS工作。

添加了样式style="flex-direction: row"

希望这有帮助。

                <ul class="navbar-nav mr-auto list-inline" style="flex-direction: row">
                    <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="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="text" placeholder="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                    </form>
                </ul>
                <a class="navbar-brand" href="#">Navbar</a>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">


                </div>
            </nav>

Bootstrap4标头卡在移动显示屏上

1 个答案: