如何让Twitter Bootstrap nav下拉菜单下推其他元素

我使用引导程序来设计我的网站，它几乎在每个级别都运行良好，但我无法使用导航栏来压低所有其他元素就像它在Github上的例子一样。如何让Twitter Bootstrap nav下拉菜单下推其他元素

这里是我的导航栏看起来像哪个几乎匹配的例子。我无法弄清楚有什么不同。

<html> 
<body> 
     <div class="navbar navbar-fixed-top"> 
      <div class="navbar-inner"> 
      <div class="container"> 
       <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <a class="brand" href="/"><img src="http://i.imgur.com/MiZZqIZ.png" alt="logo"></a> 
       <div class="nav-collapse collapse"> 
       <span style="font-size:2em"> 
       <ul class="nav"> 

        <li><a href="/videohandler">Upload</a></li> 

        <li><a href="/about">About</a></li> 
       </ul> 
       </span>    
       </div><!--/.nav-collapse --> 
      </div> 
      </div> 
     </div> 

<!-- all my code --> 

</body> 
</html>

UPDATE：

这是Github example我指的是，如果你让浏览器更小它只会显示“品牌”元素，使其余元素在下拉菜单中的远右边。在下滑的例子中，它也将下面的div压低了相同的数量。这是滑落在我的项目上，但没有压低它下面的div。在我的身上，它只是直下并覆盖它们。

来源

2013-07-25 clifgray

同一问题在这里.. – BrOSs

尽管在这种情况下“下推”的含义并不令人难以置信，但基于navbar固定的使用，我会猜测你的意思是它覆盖了你的内容。这是一个简单的解决方法 - 只需添加一些填充到你的身体元素。 60px通常有效。

除非这不是你的问题，在这种情况下，链接到JSFiddle甚至是你正在谈论的“Github示例”的链接将会很好。

来源

2013-07-25 20:13:34 moberemk

是的我不是很清楚。我为你发布了一个链接。 – clifgray

嗯...仍然很难说究竟给了什么问题给你的HTML看起来是正确的。我唯一能猜到的是，无论出于什么原因，你的导航栏都保留了它的固定属性而不是以一定的大小丢失 - 你可以用元素检查器来确认。可能你没有包含bootstrap-responsive.css，或者如果你使用Bootstrap的Javascript组件的自定义下载，你可能没有下载所有的相关组件。 – moberemk

-2

Bootstrap使用脚手架系统，使用行类和跨度1-12是结构的基础。

关于它如何工作的概括，我建议你看看bootstrap页面上的样本。

http://twitter.github.io/bootstrap/getting-started.html#examples

来源

2013-07-25 20:18:15

是的，我已经使用过它，但它们并没有在任何官方示例中使用一行作为导航栏。 – clifgray

如果你想有其他元素向下推，当折叠菜单打开（下拉菜单），你必须要么更换类的导航栏固定顶'在你的代码与第一个div通过在代码的开头部分添加以下行（在链接到“bootstrap.css”之后），重新定义'.navbar-fixed-top'的位置属性：

<style> 
     .navbar-fixed-top{position:relative;} 
    </style>

说明：类'.navbar-fixed-top'&'.navbar-fixed-bottom'有他们的位置n属性在'bootstrap.css'中设置为'fixed'，所以它们被从正常流程中取出。您必须覆盖/重新定义此设置才能将这些元素置于正常流程中，并在菜单从折叠状态打开时让内容向下推动。这可以通过将'.navbar-fixed-'类的元素的css-property'position'设置为'relative'或者将'.navbar-fixed-'替换为'.navbar-static- *'来完成。（后者在'bootstrap.css'中已将其位置设置为'相对'。）

来源

2014-11-01 15:30:00

如何让Twitter Bootstrap nav下拉菜单下推其他元素

回答

相关问题