Bootstrap制作全宽全高列

时间:2017-09-24 17:48:53

标签: html css twitter-bootstrap

我有以下布局:

<body>
  <nav class="navbar navbar-inverse">
      ...
  </nav>

  <div class="jumbotron">
     ...
  </div>

  <div class="container">
     <div class="row">
          <div class="col-xs-12">...</div>
     </div>

     <div class="row">
          <div class="col-xs-4">...</div>
          <div class="col-xs-4">...</div>
          <div class="col-xs-4">...</div>
     </div>
  </div>
</body>

Navbar和标题占据屏幕宽度的100%。但是,列不会 - 巨大的空边距仍然靠近屏幕的左右边缘。

如果我删除了container div,所有内容占用了100%的空间并且我的工作正常,但是我不确定它是否是一个很好的做法,因为在alll examples {{ 1}}被使用。另外,我想让列占据页面末尾的所有空间,并且不确定是否需要container来完成它。

1 个答案:

答案 0 :(得分:1)

根据Bootstrap文档,需要一个容器。如果您想要全宽容器,可以使用container-fluid代替container。您可以在Bootstrap 3文档中找到它:

http://getbootstrap.com/docs/3.3/css/#grid

您可以在Bootstrap 4文档中找到有关此内容的信息:

https://getbootstrap.com/docs/4.0/layout/overview/