web-dev-qa-db-ja.com

Bootstrap要素の幅100％

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

望ましいセットアップ：

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

現在：

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

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

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

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

csstwitter-bootstrapwidth
71
user1589214

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>
63
Ross Allen

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

<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部分は、コンテンツが依然として固定幅でラップされていることを確認します。

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

29
jvannistelrooy

素早い回答

  1. 複数使用NOT NESTED.containers
  2. divに全幅の背景を持たせたい.containersをラップする
  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*/ }

さらに詳しい情報

入れ子になったコンテナを使用しないでください

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

使い方

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

bootstrapコンテナは、ボディの直接の子である必要はありません。これらは、何らかのパディングと、場合によっては画面幅が可変の固定幅を持つコンテナです。

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

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

「基本的な」divとは、CSSで境界、パディング、寸法、位置、またはコンテンツサイズを変更しないdivを意味します。本当にdisplay: block; CSSとおそらくバックグラウンドを持つHTML要素。
しかし、もちろん、縦長のようなCSS（高さ、パディングトップ、...）を設定しても、bootstrapグリッドが壊れてはいけません:-)

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

...それ自体がすべて website で、その中に「JUMBOTRON」の例があります：
http://getbootstrap.com/examples/jumbotron/

26
jave.web

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;
}
17
benedex82

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

6
Seb33300

bootstrap 4では、「w-100」クラスを使用できます（wは幅、100は100％）

ここでドキュメントを見つけることができます： https://getbootstrap.com/docs/4.0/utilities/sizing/

5
Dina

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

コンテンツと画像は分離します： http://jsfiddle.net/QvqKS/2/

同じdivのコンテンツと画像（imgは左にフロート）： http://jsfiddle.net/QvqKS/3/

1
Michael Peterson

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

私の状況では、すべてのコンテンツ（すべてのページ）をコンテナー内にレンダリングしたかったため、これは_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
Alisson

の代わりに

style="width:100%"

使ってみてください

class="col-xs-12"

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

0
Yevgeniy Afanasyev

次の答えは、どのような手段によっても最適ではありませんが、内側の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
adamj

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

0
Fahad Uddin