问

Bootstrap Navbar显示为垂直列表......？

大廷705 发布于 2023-01-22 12:16

所以我在网上关注一个教程(http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/)并完全遵循代码,但出于某种原因,我的导航栏没有显示出来它应该是.我的朋友(对web开发人员更有经验)快速查看了代码,但无法弄清楚出了什么问题.所以我想我会在这里发布我的问题.

HTML代码(左),实际页面(右)

我还会告诉你我的工作目录(以防万一你想知道这些文件是否都在同一个目录中):

在此输入图像描述

这是代码,以防您想自己尝试




    
    My bootstrap
    



    
        Bootstrap Site
        
            
                
                    
                        Home
                        Projects
                        Services
                        Downloads
                        About
                        Contact

2 个回答

我想你正在使用最新的Bootstrap.

你必须添加navbar-default到你的<div class="navbar">和navbar-nav你的<ul class="nav">.

这给你以下标记.

<div class="container">
  <h1><a href="#">Bootstrap Site</a></h1>
  <div class="navbar navbar-default">
    <div class="navbar-inner">
      <div class="container">
        <ul class="nav navbar-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>

工作实例

对于未来的问题,请先尝试阅读官方的Bootstrap文档,然后再询问此处.他们解释了一切非常详细.

BT Navbar

我想您的问题是,sitepoint教程使用的是较旧的Bootstrap版本,而不是您下载和使用的版本.

2023-01-26 12:19 回答

我爱投资理财

我在使用bootstrap v4时遇到了类似的问题。先前的答案代码对我来说效果很好，但只是想澄清一下，使垂直导航栏变为水平的部分是在主div标签中使用navbar-expand-lg。
```
<nav class="navbar navbar-expand-lg">
```
根据屏幕大小的偏好设置，将lg更改为其他大小（md，sm或xs）也很有帮助。

希望这可以帮助
2023-01-26 12:56 回答

卖火柴的杜拉拉

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签