Question

我刚开始从https://www.w3schools.com/bootstrap/default.asp网站学习bootstrap。在网站中声明array_M和.container-fluid类必须用于网格系统，即只有当我们有行和列时。但是＆＃34;导航栏的所有代码片段＆＃34;即使没有使用行和列，该网站上的部分也使用.container类。导航栏使用.container-fluid（无序列表）创建。以下是一个例子：

＆＃13;

ul

＆＃13;

所以这就是问题：我在哪里可以使用<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-default"> <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>课程？我可以将.container-fluid应用到我的整个页面吗？

Answer 1

根据Bootstrap site，这是＆＃39;容器的预期用途＆＃39;：

Bootstrap需要包含元素来包装网站内容和包含我们的网格系统。您可以选择使用两个容器中的一个   你的项目。需要注意的是，由于填充量较多，既不是容器   是可嵌套的。

使用.container作为响应式固定宽度容器。

使用.container-fluid作为整个宽度的容器，跨越整个容器   视口的宽度。

因此，无论您是否故意将其用于网格系统，您仍然可以使用其中一个作为页面内容（或其中一部分）的容器。您将获得以下CSS规则，其中包含一些不同的子元素规则（下载源并仔细阅读）：

    [both container and container-fluid] {
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
      width: [for container this is based on media query]
    }
    :before,:after {
      display: table;
      content: " ";
    }
    :after {
      clear: both;
    }

根据我的经验，典型的用法是身体内部的div，而不是身体本身。

.container-fluid / .container仅用于网格系统吗？

1 个答案: