html - Bootstrap Navbar 显示为垂直列表...?

标签 html css twitter-bootstrap navbar

所以我按照在线教程 (http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/) 并完全按照代码进行操作,但由于某种原因,我的导航栏没有按应有的方式显示。我的 friend (在网络开发方面更有经验)快速查看了代码,但无法找出问题所在。所以我想我应该在这里发布我的问题。

html code (left), actual page (right)

我还会向您展示我的工作目录(以防万一您想知道文件是否都在同一目录中):

enter image description here

如果你想自己尝试,这里是代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My bootstrap</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>

    <div class="container">
        <h1><a href="#">Bootstrap Site</a></h1>
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <ul class="nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Projects</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Downloads</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>


    </div>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
</body>

最佳答案

我在使用 bootstrap v4 时遇到了类似的问题。之前的答案代码对我来说效果很好,但只是想澄清一下,使垂直导航栏水平的部分是在主 div 标签中使用 navbar-expand-lg。

<nav class="navbar navbar-expand-lg">

根据您的屏幕尺寸偏好,将 lg 更改为其他尺寸(md、sm 或 xs)也有帮助。

希望对你有帮助

关于html - Bootstrap Navbar 显示为垂直列表...?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21958835/

相关文章:

html - float block 到其他内容的右侧

javascript - D3过渡,margin-top进展不顺利

javascript - 返回并从 HTML 字符串中删除元素

html - Internet Explorer 8 - Div 在调整大小时消失

javascript - 如何让 DateTimePicker 在 iOS 和 Android 上工作?

JAVASCRIPT:IE:outerHTML

Jquery 垂直标签 - 右边的标签

css - 并排div

php - bootstrap ul 不居中

html - 更改 Bootstrap 导航栏折叠断点