Question

<div class="container">
        <ul class="nav navbar-inverse nav-tabs">
            <li><%= link_to "Home", '#'%></li>
            <li><%= link_to "About", '#'%></li>
            <li><%= link_to "Resume", '#'%></li>
            <li><%= link_to "Projects", '#'%></li>
            <li><%= link_to "Blog", '#'%></li>
        </ul>
</div>

我正在尝试使用Ruby on Rails和Bootstrap构建自己的网站。我不了解导航标签元素周围<div class="container">的用途。如果我将容器放出，nav-tab元素看起来是一样的。但这似乎是创建大多数导航菜单的方式。这只是惯例吗？

Answer 1

围绕其他内容（例如导航或网格系统）使用的

class="container"将限制子内容的宽度不超过媒体查询中任何给定断点处的宽度，以便所有内容排成一行并且是居中并匹配页面其余部分的宽度。除非导航中的内容超出宽度，否则您将无法看到这种情况发生。如果您使用了.brand和.navbar的默认结构，那么您会这样做。如果没有.container，则内容将是视口的整个宽度。

查看未打包的CSS以查看您正在使用的内容非常有用：

https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

第1564-1584行：

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 768px) { 
    .container {
        width: 750px
    }
}
@media (min-width: 992px) { 
    .container {
        width: 970px
    }
}
@media (min-width: 1200px) { 
    .container {
        width: 1170px
    }
}

Answer 2

此<div>通常用作布局工具，因为它可以使用CSS轻松定位。然后将这个位置应用于下一个，它应该具有相同的对齐方式。

用法示例，如果您希望更容易使用不同的宽度布局。您只设置包装元素的宽度，即#container，而web是给定分辨率的那些延伸。

基本HTML网站布局示例：

<div id="container">
   <header>
       <nav>
          <ul>
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4</li>
          </ul>
       </nav>
   </header>
   <section>
        <article>
            Article 1
        </article>
        <article>
            Article 2
        </article>
   </section>
   <footer>
        Footer
   </footer>
</div>

CSS：

#container {
    width: 1000px;
}

@media screen and (max-width: 1000px) {
    #container {
        width: 800px;
    }
}

@media screen and (min-width: 1200px) {
    #container {
        width: 1300px;
    }
}

为什么要包装<div class =“container”>关于nav元素？</div>

2 个答案: