为什么我的助推器导航栏不是水平的

-2

例如：https://codepen.io/SimpleRoger/pen/OmRKNq 导航栏是垂直不水平的;请帮忙。为什么我的助推器导航栏不是水平的

<html>

来源

2017-05-29 Roger Tan

请不要忽略或绕过编辑器给你的警告。非现场的例子，通过Codepen或类似的，是受欢迎的，但只作为额外的细节。代码中最相关的代码片段需要包含在问题的文本中。 –

Codepen预计“HTML”编辑器仅包含“”的内容，而不是完整的文档。它试图为你包括''，''和''这样的元素，所以结果最终会包含每个元素中的两个元素，这会破坏文档。要添加外部CSS和JS文件，请使用编辑器面板顶部的齿轮图标。修改过的笔：https：//codepen.io/anon/pen/JNqZrO –

感谢队友，所以它是codepen –

尝试运行这些代码，请

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Page 1</a></li> 
 
     <li><a href="#">Page 2</a></li> 
 
     <li><a href="#">Page 3</a></li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 
    
 
<div class="container"> 
 
    <h3>Inverted Navbar</h3> 
 
    <p>An inverted navbar is black instead of gray.</p> 
 
</div> 
 

 
</body> 
 
</html>

引导是一个积极的网站框架（对不起，我不知道该称呼它，我所知道的是，自举产生响应式网站）。所以它会自动检测浏览器显示网站的高度和宽度有多长。如果显示器的高度和宽度是这么多的引导程序将显示这样的网页，如果显示器的高度和宽度是很多引导程序将显示这样的网页。基本上bootstrap有3种显示模式，即台式机，平板电脑和手机，这意味着bootstrap在3种不同的显示模式下有3种不同的风格。因此，如果您使用codepen，我认为bootstrap假设您没有使用桌面，因此它会像上面给出的代码一样垂直显示导航栏（平板电脑或手机）。我试图复制代码并将其粘贴到本地计算机上，并且运行良好（导航栏水平显示）。因此，如果您想制作网站并使用引导程序，我建议您使用本地PC，而不是使用codepen。您可以将引导程序复制到本地PC，并且可以使用phpStorm或其他类似的软件，这样可以通过ftp轻松将站点上载到您的服务器。

来源

2017-05-29 04:07:07

您的导航栏在大屏幕上工作正常。但在中小屏幕上，它变得垂直。所以我想出了一个简单的解决方案：将元素浮动到左侧。只需将以下代码添加到您的样式表。

.navbar-nav>li, .navbar-nav { 
    float: left !important; 
}

我希望这有助于！

来源

2017-05-29 07:36:29 cruz

为什么我的助推器导航栏不是水平的

回答

相关问题