web-dev-qa-db-ja.com

100％幅のTwitter Bootstrap 3テンプレート

私はブートストラップ初心者で、ブートストラップでコーディングしたい100％幅のテンプレートがあります。最初の列は左隅から始まり、Googleマップで一番右に伸びています。私はこれをcontainer-fluidクラスで実行できると思いましたが、それはもう利用できないようです。ブートストラップ3を使ってそのレイアウトを実現する方法はわかりません。私はthemeforestのGeometry PSDテンプレートを使用しています。レイアウトを表示する場合は、ここにリンクがあります。 http://themeforest.net/item/geometry-design-地理位置情報ソーシャルネットワーク用/ 4752268

htmlcsstwitter-bootstraplayouttwitter-bootstrap-3
130
Samia Ruponti

Bootstrap 3では、カスタムラッパーを使用してその幅を100％に設定する必要があります。

.container-full {
  margin: 0 auto;
  width: 100%;
}

ここで はBootplyの実用的な例です

カスタムクラスを追加したくない場合は、col-lg-12（ ワイドレイアウトデモ 内にすべてをラップすることで、非常に広いレイアウト（100％ではない）を実現できます。 ）

ブートストラップ3.1用の更新

Bootstrap 3.1ではcontainer-fluidクラスが返されたため、これを使用して全幅レイアウトを作成できます（追加のCSSは必要ありません）。

ブートストラップ3.1のデモ

238
Zim

これはBootstrap v3.0.0の100％幅レイアウトの完全な基本構造です。 <div class="row">をcontainerクラスでラップしないでください。原因containerクラスはかなりのマージンを取るでしょう、そしてこれはブートストラップが彼らのモバイルファーストバージョンv3.0.0からcontainer-fluidクラスを削除したフルスクリーン（100％幅）レイアウトをあなたに提供しません。

コンテナークラスなしで<div class="row">を書き始めるだけで、100％幅のレイアウトに進むことができます。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Basic 100% width Structure</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://getbootstrap.com/assets/js/html5shiv.js"></script>
  <script src="http://getbootstrap.com/assets/js/respond.min.js"></script>
<![endif]-->
<style>
    .red{
        background-color: red;
    }
    .green{
        background-color: green;
    }
</style>
</head>
<body>
    <div class="row">
        <div class="col-md-3 red">Test content</div>
        <div class="col-md-9 green">Another Content</div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

自分で結果を見るために、私はbootplyを作成しました。ライブ出力を見てください。 http://bootply.com/82136 そして完全な基本的なブートストラップ3 100％幅のレイアウト私は要旨を作成しました。あなたはそれを使うことができます。ここから要旨を入手

さらに支援が必要な場合は私に返信してください。ありがとう。

28
Shaharia Azam

Bootstrap 3.3.5と.container-fluidを使用すると、モバイルでガターや水平スクロールなしで全幅を取得できます。 .container-fluidは3.1で再導入されたことに注意してください。

モバイル/タブレットでは全角、デスクトップでは1/4画面

<div class="container-fluid"> <!-- Adds 15px left/right padding --> 
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div class="col-md-4 col-md-offset-4" style="padding-left: 0, padding-right: 0"> <!-- col classes adds 15px padding, so remove the same amount -->
      <!-- Full-width for mobile -->
      <!-- 1/4 screen width for desktop -->
    </div>
  </div>
</div>

すべての解像度（モバイル、テーブル、デスクトップ）で全幅

<div class="container-fluid"> <!-- Adds 15px left/right padding -->
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div>
      <!-- Full-width content -->
    </div>
  </div>
</div>
27
angularsen

あなたはdiv.container-fluidを正しく使っていますし、div.rowの子も必要です。次に、コンテンツをグリッド列なしで内部に配置する必要があります。あなたがドキュメントを見ているなら、あなたはこのテキストを見つけることができます：

  • 適切な配置とパディングのために、行を.container（固定幅）または.container-fluid（全幅）内に配置する必要があります。
  • 行を使用して水平方向の列グループを作成します。

ここで述べたように、グリッド列を使用しなくても大丈夫です。

  • 内容は列内に配置する必要があり、列だけが行の直接の子になることができます。

そして この の例を見て、あなたはこのテキストを読むことができます：

全角1列：全角要素にはグリッドクラスは必要ありません。

これは正しいレイアウトを使っていくつかの要素を表示している 実例です。これにより、カスタムCSSやハックは不要になります。

20
gerardnll

BOOTSTRAP 4ではあなたが使うことができます

<div class="row m-0">
my fullwidth div
</div>

...最上位のdivとして.m-0を指定せずに.rowを使用すると、余計な余白ができるため、ブラウザウィンドウよりもページの幅が広くなり、水平スクロールバーが表示されます。

1
Sandy Maier