Fatal编程技术网
  • html/
  • Html 复制github'；使用引导导航栏时的topbar行为？

Html 复制github'；使用引导导航栏时的topbar行为？

html css twitter-bootstrap

Html 复制github'；使用引导导航栏时的topbar行为？,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,Github顶部的条是我试图使用引导navbar类（）复制的 请注意，当核心图元在其固定列中保持在位时，该条是如何延伸以填充整个浏览器窗口的？这就是我想弄明白的 我有以下代码 <body> <div class="container"> <div class="row"> <div class="span12"> <img src="/img/logo_sml.png">

Github顶部的条是我试图使用引导navbar类（）复制的

请注意，当核心图元在其固定列中保持在位时，该条是如何延伸以填充整个浏览器窗口的？这就是我想弄明白的

我有以下代码

<body>
    <div class="container">

    <div class="row">
        <div class="span12">
            <img src="/img/logo_sml.png">
        </div>
    </div>
</div>

<div class="navbar">
    <div class="navbar-inner">
        <a class="brand" href="#">Home</a>
    </div>
</div>
刷新页面，然后。。。那没用。是否有一种方法可以扩展引导
navbar
的“尾部”，同时将内容保留在主
容器中

下面是添加到
container
类中的结果。这些元素一直位于浏览器的左侧


这是因为css有一个属性：


.navbar .container {
   width: auto;
}


如果您放置的css属性


.navbar .container {
   width: 940px;
}


它应该像你所期望的那样工作


您可以在此和中看到使用的代码。
当您在问题末尾说“那不起作用”时，发生了什么？在
.navbar.navbar-internal
元素中放置一个container div应该可以做到这一点。你可以在这里看到一个例子：@fletch-Hmm。。我只是复制并粘贴了代码。似乎唯一可行的方法是使用
固定顶条。。如果我删除该行，所有内容都会再次向左移动。这有点蹩脚。如果要使用bootstrap responsive，请确保在各种媒体查询中定义匹配的
width
。

.navbar .container {
   width: 940px;
}