ブートストラップ要素100％幅

96

100％色のブロックを交互に作成したいと思います。「理想的な」状況は、現在の状況だけでなく、添付ファイルとして示されています。

必要なセットアップ：

http://i.imgur.com/aiEMJ.jpg

現在：

http://i.imgur.com/3Sl27.jpg

私の最初のアイデアは、divクラスを作成し、背景色を付け、幅を100％にすることでした。

.block {
    width: 100%;
    background: #fff;
}

ただし、これは明らかに機能しないことがわかります。コンテナエリアに限定されています。コンテナを閉じようとしましたが、それも機能しませんでした。

css  twitter-bootstrap  width 
— user1589214
ソース
使用しているコードを含めてもらえますか？それがなければ、divの含まれるタグの幅が100％以外に設定されていないことを確認する必要があります
— Michael Peterson
ちょっとマイケル、応答をありがとう。これが私が<div class="container"> <div class="row"> <div class="span12"><img src="img/logo.png" width="960px"></center></div> <div class="block">content</div>
— 扱っ

回答:

78

containerこのクラスは、意図的に100％の幅ではありません。ビューポートの幅によって固定幅が異なります。

画面の全幅で作業する場合は、次を使用します.container-fluid。

ブートストラップ3：

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6"></div>
    </div>
    <div class="row">
      <div class="col-lg-8"></div>
      <div class="col-lg-4"></div>
    </div>
    <div class="row">
      <div class="col-lg-12"></div>
    </div>
  </div>
</body>

ブートストラップ2：

<body>
  <div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
  </div>
  <div class="row">
    <div class="span8"></div>
    <div class="span4"></div>
  </div>
  <div class="row">
    <div class="span12"></div>
  </div>
</body>
— ロス・アレン
ソース
1
.rowには.container、この場合は.container-fluidが必要です。
— netAction 2014
1
古いバージョンのブートストラップスタイルシートを使用している場合はcontainer-fluid、水平スクロールバーが発生します。これを修正するには、これをスタイルシートに追加します.container-fluid{ padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
— チャーリー
29

これは、Bootstrap3を使用して目的のセットアップを実現する方法です。

<div class="container-fluid">
    <div class="row"> <!-- Give this div your desired background color -->
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    ... your content here ...
                </div>
            </div>
        </div>
    </div>
</div>

container-fluid一部では、全幅にわたり背景を変更できることを確認します。ザ・containerパーツは、コンテンツが固定幅でラップされていることを確認します。

このアプローチは機能しますが、個人的にはすべてのネストが好きではありません。しかし、私はこれまでのところ、より良い解決策を見つけていません。

— JacobF
ソース
3
実際、「どちらのコンテナーもネスト可能ではない」ように見えるので、getbootstrap.com / css /＃overview-containerなので、ここでいくつかの問題が発生する可能性があります（ただし、引き続きソリューションを使用すると思います）。
— ティボーバレール
コンテナ流体クラスはブートストラップ3.0では使用できませんが、3.1以降では使用できます
— Dev
29

素早い回答

  1. 使用し、複数のネストされていません .containerの
  2. .container全幅の背景にしたいものをdiv
  3. ラッピングdivにCSSの背景を追加します

フィドル：シンプル：https ：//jsfiddle.net/vLhc35k4/、コンテナの境界：https ：//jsfiddle.net/vLhc35k4/1/
HTML：

<div class="container">
  <h2>Section 1</h2>
</div>
<div class="specialBackground">
  <div class="container">
    <h2>Section 2</h2>
  </div>
</div>

CSS： .specialBackground{ background-color: gold; /*replace with own background settings*/ }

詳細情報

ネストされたコンテナは使用しないでください

多くの人が（間違って）ネストされたコンテナを使用するように提案します。
まあ、あなたはすべきではありません。
ネストする必要はありません。（「コンテナ」を参照してください。ドキュメントの」セクションを）

使い方

divはブロック要素であり、デフォルトではドキュメント本文の全幅にまたがっています。全幅機能があります。また、コンテンツの高さもあります（特に指定しない場合）。

ブートストラップコンテナは、ボディの直接の子である必要はありません。これらは、いくつかのパディングと、場合によっては画面幅可変の固定幅を備えた単なるコンテナです。

基本グリッドの.container幅が固定されている場合は、水平方向にも自動中央揃えされます。
したがって、次のように配置しても違いはありません。

  1. 体の直接の子
  2. 体の直接の子である基本 divの直接の子。

「基本」divとdivは、CSSが境界線、パディング、寸法、位置、またはコンテンツサイズを変更しないことを意味します。本当にdisplay: block;CSSとおそらく背景を持つ単なるHTML要素。
しかしもちろん、垂直のようなCSS（高さ、パディングトップなど）を設定しても、ブートストラップグリッドが壊れることはありません:-)

ブートストラップ自体も同じアプローチを使用しています

...それ自体のウェブサイト全体とその「JUMBOTRON」の例：http：//getbootstrap.com/examples/jumbotron/

— jave.web
ソース
1
この答えは非常に徹底的で断固として、他のコンテナ内にコンテナをネストすることは「非常に悪い考え」（ゴーストバスターズでは「ストリームを横断する」など）であり、これを裏付けるBootstrapWebサイトのリファレンスを指しています。単純なdiv内にコンテナーを含めることは提案であり、BoostrapがJumbotronの例でこの手法を使用しているという事実は、jave.webが今日の勝者であることを示しています。
— フォルクスマン2016年
そのジャンボトロンの例は私の質問をすべて削除しました。
— アレクサンダーキム
コンテナを閉じて、新しいフルウィズコンテナを開くことができない場合があります。回避策。次の答えではより良いです！
— RubbelDeCatc
21

vwを使用した回避策があります。新しい流体コンテナを作成できない場合に便利です。これは、クラシックな「コンテナ」div内でフルサイズになります。

.row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 left: 50%;
}

この後、サイドバーの問題があり（@Typhlosaurusのおかげで）、このjs関数で解決され、ドキュメントの読み込みとサイズ変更時に呼び出されます。

function full_row_resize(){
    var body_width = $('body').width();
    $('.row-full').css('width', (body_width));
    $('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
    return false;
}
— benedex82
ソース
3
これは、ページレイアウト全体を変更する必要がない理想的な答えに非常に近く、場合によっては十分ですが、スクロールバーには微妙な問題があります。.row-fullは、スクロールバーが不透明であるかどうかに応じて、スクロールバーの有無にかかわらずウィンドウ全体を埋めるコンテナ流体とは異なり、スクロールバーを無視してウィンドウ全体を埋めます。
— タイフロサウルス2016
ワオ。jsがそのトリックを実行しました。私は解決策を何時間も探していました。私の問題は、コンテンツがcms以内に入力されているため、外側のhtmlを変更できないことです。本当にjsなしの解決策があるかどうか知りたいです。
— drooh 2018
6

HTMLレイアウトを変更できない場合：

.full-width {
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
}

<div class="container">
  <div class="row">
    <div class="col-xs-12">a</div>
    <div class="col-xs-12">b</div>
    <div class="col-xs-12 full-width">c</div>
    <div class="col-xs-12">d</div>
  </div>
</div>

デモ：http：//www.bootply.com/tVkNyWJxA6

— Seb33300
ソース
2

の代わりに 

style="width:100%"

使ってみてください 

class="col-xs-12"

それはあなたに1文字を節約します:)

— Yevgeniy Afanasyev
ソース
この答えは、OPが求めていたものではありません。これにより、外側の.containerdivの全幅である列が作成されますが、これはブラウザのページの全幅と同じではありません。これが質問の対象です。
— ハートリーブロディ
OPが「ブラウザのページの全幅」を要求したことがわかりません。どうやってそれを理解しますか？
— YevgeniyAfanasyev19年
2

コンテンツコンテナを閉じることができない場合があります。私たちが使用している解決策は少し異なりますが、Firefoxのスクロールバーのサイズによるオーバーフローを防ぎます！

.full-width {
 margin-top: 15px;
 margin-bottom: 15px;
 position: relative;
 width: calc(100vw - 10px);
 margin-left: calc(-50vw + 5px);
 left: 50%;
}

次に例を示します：https：//jsfiddle.net/RubbelDeKatz/wvt9253q

— RubbelDeCatc
ソース
Bootstrap 4では、これが断然最良の答えです。乾杯！
— メトロスマーフ
1

申し訳ありませんが、CSSも要求する必要があります。現状では、基本的にあなたが見る必要があるのはあなたのコンテナdiv.container { width: 100%; }にあなたのcssのスタイルを与えることです、そしてあなたが彼らに彼ら自身の幅を与えない限り、囲まれたdivはこれを継承します。また、少なくともコードのこのセクションでは、いくつかの終了タグが欠落していて、開い</center>てい<center>ない状態で終了します。同じdivにコンテンツが含まれているのか、それとも別の画像が必要なのかわからなかったため、2つの例を作成しました。jsfiddleの表示領域が小さいという理由だけで、imgの幅を100pxに変更しました。それがあなたが探しているものではない場合は私に知らせてください。

コンテンツと画像を分離：http：//jsfiddle.net/QvqKS/2/

同じdiv内のコンテンツと画像（imgは左に浮かんでいます）：http：//jsfiddle.net/QvqKS/3/

— マイケルピーターソン
ソース
0

コンテナの幅を「オーバーライド」しようとするのはなぜだろうかと思います。その目的はコンテンツをパディングで維持することだからですが、私も同様の状況でした（そのため、答えはありますが、ソリューションを共有したかったのです。 ）。

私の状況では、（すべてのページの）すべてのコンテンツをコンテナー内にレンダリングしたかったので、これは私の_Layout.cshtmlのコードの一部でした。

<div id="body">

    @RenderSection("featured", required: false)

    <section class="content-wrapper main-content clear-fix">
        <div class="container">
            @RenderBody()
        </div>
    </section>
</div>

ホームページのページに、画面の幅全体に表示したい背景ヘッダー画像があったので、解決策はIndex.cshtmlを次のようにすることでした。

@section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
    <div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}

<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
    <div class="container">
        <div class="row">
          MORE CONTENT
        </div>
    </div>
</div>

セクションは、ビューがレイアウト内の一部のコンテンツを動的に置き換えることを許可（または強制）する目的で作成されるため、これは回避策を作成するよりも優れていると思います。

— アリソン
ソース
0

この場合は.container-fluidを使用する必要があると言われていますが、ブートストラップからパディングを削除する必要もあります。

0

次の答えは、どのような方法でも正確に最適ではありませんが、内部divを完全に伸ばしている間、コンテナ内でその位置を維持するものが必要でした。

https://jsfiddle.net/fah5axm5/

$(function() {
    $(window).on('load resize', ppaFullWidth);

    function ppaFullWidth() {
        var $elements = $('[data-ppa-full-width="true"]');
        $.each( $elements, function( key, item ) {
            var $el = $(this);
            var $container = $el.closest('.container');
            var margin = parseInt($container.css('margin-left'), 10);
            var padding = parseInt($container.css('padding-left'), 10)
            var offset = margin + padding;

            $el.css({
                position: "relative",
                left: -offset,
                "box-sizing": "border-box",
                width: $(window).width(),
                "padding-left": offset + "px",
                "padding-right": offset + "px"
            });
        });
    }
});
— アダムジ
ソース
0

以下のように、2つの別々の 'container'divを使用します。

<div class="container">
   /* normal*/
</div>
<div class="container-fluid">
   /*full width container*/
</div>

container-fluidはブレークポイントに従わず、全幅のコンテナーであることに注意してください。

— Arash MAS
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.