106

100% 色付きのブロックを交互に作成したいと考えています。現在の状況だけでなく、「理想」の状況を添付ファイルとして図解しています。

望ましいセットアップ:

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

現在：

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

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

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

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

4

14 に答える 14

87

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>
于 2013-08-06T01:53:13.820 に答える
32

素早い回答

  1. 複数のNOT NESTEDを使用する .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. body の直接の子であるbasicの直接の子。 div

「基本」とは、境界線、パディング、寸法、位置、またはコンテンツ サイズを変更する CSS がないことdivを意味します。実際には、 CSS と場合によっては背景 divを含む単なる HTML 要素です。しかしもちろん、垂直のような CSS (height、padding-top など) を設定しても、ブートストラップ グリッドが壊れてはなりません :-)display: block;

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

...独自のWebサイト全体と、「JUMBOTRON」の例：
http://getbootstrap.com/examples/jumbotron/

于 2016-04-16T21:44:38.543 に答える
24

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;
}
于 2016-06-09T14:53:30.567 に答える
7

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

于 2016-10-14T08:20:24.287 に答える
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/

于 2012-08-10T18:38:07.637 に答える
0

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

于 2016-01-03T10:59:24.343 に答える
0

I'd wonder why someone would try to "override" the container width, since its purpose is to keep its content with some padding, but I had a similar situation (that's why I wanted to share my solution, even though there're answers).

In my situation, I wanted to have all content (of all pages) rendered inside a container, so this was the piece of code from my _Layout.cshtml:

<div id="body">

    @RenderSection("featured", required: false)

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

In my Home Index page, I had a background header image I'd like to fill the whole screen width, so the solution was to make the Index.cshtml like this:

@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>

I think this is better than trying to make workarounds, since sections are made with the purpose of allowing (or forcing) views to dynamically replace some content in the layout.

于 2015-10-29T01:55:56.020 に答える