Geek asks and answers

Position div full width of the Twitter viewport loading tray

How do you create a div in Bootstrap to cover the entire width of the viewport (without fixed positioning) in a regular 12-grid “row” and “span” system?

In the Bootstrap source, the class navbar-fixed-topachieves this effect using a fixed position and attributes leftand right:

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
  margin-bottom: 0;
}

However, this navigator remains in the window regardless of scrolling. What styles are needed to achieve the same width of the viewport without fixed positioning?

+3
source share
2 answers

, body html 100% , div . , , , div 100% /, body html. :

html, body {
    width:100%;
    height:100%;
}

body {
    padding-top:60px;
}

.wrapper {
    height: 100%;
    width: 100%;
}

.huge {
    width:100%;
    height:100%;
    background-color:#eee;
}

, .

. .huge div ​​ - padding-top , , "" 100- , 100% + 60 , .

+4

Bootstrap 3 ( ), :

  • Bootstrap .row margin: margin: 0 -15px;.
  • , .

CSS

.container-full-width {
    padding: 0 15px; /* Offset .row margin */
    width: 100%;
}
/* Optional. See comment below. */
.row {
    padding-left: 70px;
    padding-right: 70px;
}

HTML

<body>
  <div class="container-full-width">
    <div class="row">
      ...
    </div>
  </div>
...
</body>

, .row , , .row .

.row , /.

, Bootstrap 2.

0

More articles:


All Articles