私はブートストラップ初心者であり、ブートストラップでコーディングしたい100％幅のテンプレートがあります。最初の列は左隅から始まり、Googleマップで右端まで伸びています。container-fluidクラスでこれを行うことができると思ったが、それはもはや利用できないようです。あなたがレイアウトを確認したい場合、私は、私は、ここにリンクをthemeforestからジオメトリPSDテンプレートを使用していますどのようにブートストラップ3とそのレイアウトを実現するためには考えています。http://themeforest.net/item/geometry-design-for- geolocation-social-networkr / 4752268
回答:
Bootstrap 3の場合、カスタムラッパーを使用し、その幅を100％に設定する必要があります。
.container-full {
margin: 0 auto;
width: 100%;
}ここ Bootplyに取り組ん例があります
カスタムクラスを追加したくない場合は、すべてをcol-lg-12（ワイドレイアウトデモ）でラップすることにより、非常にワイドなレイアウト（100％ではない）を実現できます。
Bootstrap 3.1のアップデート
container-fluidクラスは、ブートストラップ3.1に戻ってきたので、これは（追加のCSSは必要ありません）全幅レイアウトを作成するために使用することができます。..
これは、のための完全な基本的な構造であり、100％の幅のレイアウトでのブートストラップV3.0.0。あなたは、あなたを包むべきではない<div class="row">とcontainerクラス。原因containerクラスにはかなりのマージンが必要であり、これにより、ブートストラップがコンテナー最初のバージョンv3.0.0からコンテナー流体クラスを削除したフルスクリーン（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>自分で結果を確認するために、ブートプライを作成しました。そこでライブ出力をご覧ください。http://bootply.com/82136そして完全な基本的なブートストラップ3 100％幅のレイアウト私は要旨を作成しました。あなたはそれを使うことができます。ここから要点を取得
さらにサポートが必要な場合は返信してください。ありがとう。
.container-full { padding: 0 15px; }
.rowのをa内に含める必要はありません.containerか？
Bootstrap 3.3.5とを使用すると.container-fluid、モバイルでガターや水平スクロールなしで全幅を取得できます。.container-fluid3.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>あなたは正しく使用div.container-fluidしていて、div.row子供も必要です。次に、グリッド列なしでコンテンツを内部に配置する必要があります。あなたがドキュメントを見ているなら、あなたはこのテキストを見つけることができます：
- 行は、適切な配置とパディングのために、.container（固定幅）または.container-fluid（全幅）内に配置する必要があります。
- 行を使用して、列の水平グループを作成します。
グリッド列を使用しない場合は、次のように問題ありません。
- コンテンツは列内に配置する必要があり、列のみが行の直接の子になる場合があります。
この例を見ると、次のテキストを読むことができます。
全幅、単一列：全幅要素にグリッドクラスは必要ありません。
これは、正しいレイアウトを使用したいくつかの要素を示す実際の例です。この方法では、カスタムCSSやハックは必要ありません。
@container-*幅を100％として使用するようにBootstrapをカスタマイズできます。また、.container-fluid3.1.0に戻ってきます。:)