3

Bootstrapでdivをどのようにスタイリングして、「行」と「スパン」の通常の12グリッドシステム内でビューポートの幅全体（固定位置なし）にまたがるようにしますか？

Bootstrapソースでは、navbar-fixed-topクラスは固定の位置leftとright属性を使用してこの効果を実現します。

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

ただし、このナビゲーションバーはスクロールに関係なくウィンドウに残ります。固定位置なしでビューポートの同じ全幅を実現するには、どのようなスタイルが必要ですか？

4

2 に答える 2

4

この効果を得るには、タグbodyとhtmlタグの高さと幅を100％伸ばしてから、子divを同じ幅に定義します。幅と高さが相対的であるため、これを行います。したがって、幅/高さでdivを100％定義すると、bodyandhtmlタグまでしか伸びません。この例を見てください：

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％の高さになります+現在のトップ60px。

于 2012-04-27T13:40:04.140 に答える