0

ジャンボトロンまたはこのようなものを全幅で使用して、全幅のコンテナを取得しようとしています:

<div class="container" style="margin: 0 auto;width: 100%;background-color: red">
  <div class="jumbotron">
    <h1>Full Width Layout</h1>

    <p class="lead">The Bootstrap 3 grid is fluid only. This example shows how to use a custom container to create a fixed width layout.</p>

    <p><a class="btn btn-large btn-success" href="http://bootply.com/tagged/bootstrap-3" target="ext">More
                    Examples</a>
    </p>
  </div>
</div>

現在私は使用しています: https://github.com/FezVrasta/bootstrap-material-design with Yii2.

これについてすべて試してみましたが、まだ問題があり、全幅ではありません。

4

2 に答える 2

2

ジャンボトロンを全幅にし、角を丸くしないようにするには、ジャンボトロンをすべての .containers の外側に配置し、代わりに .container を中に追加します。

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

ドキュメントを見る

また、Bootstrap-Material を使用しているため、組み込みクラスを使用して色を追加できます (これは material.css ではなく、 material-fullpalette.css に依存します。Docsを参照してください) 。

作業例のスニペットを参照してください。

$.material.init()
/*ADD YOURSELF*/

.jumbotron.jumbo-red {
  background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.4.4/css/material-fullpalette.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.4.4/js/ripples.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.4.4/js/material.min.js"></script>

<div class="well">Your Own CSS for Color</div>
<div class="jumbotron jumbo-red">
  <div class="container">
    <h1>Full Width Layout</h1>

    <p class="lead">The Bootstrap 3 grid is fluid only. This example shows how to use a custom container to create a fixed width layout.</p>
    <p><a class="btn btn-large btn-success" href="#" target="ext">More
                Examples</a>

    </p>
  </div>
</div>
<hr>
<div class="well">Material CSS for Color</div>
<div class="jumbotron jumbotron-material-red-A700">
  <div class="container">
    <h1>Full Width Layout</h1>

    <p class="lead">The Bootstrap 3 grid is fluid only. This example shows how to use a custom container to create a fixed width layout.</p>
    <p><a class="btn btn-large btn-material-green" href="#" target="ext">More
                Examples</a>

    </p>
  </div>
</div>

于 2015-11-24T22:26:17.370 に答える
2

全幅にしたい場合

ページで使用する必要はなく、使用containerしているレイアウトからもこのクラスを削除することを忘れないでください。（または、このクラスなしでレイアウトを定義し $this->layout= "yourNewLayout"; 、ページをレンダリングする前にアクションで設定できます）通常、デフォルトのレイアウトは次の場所にあります/view/layouts/main.php

次に、次の行を削除する必要があります。

 class="container"

その後、yii2 Web アプリで完全に表示できます。

そしてただの未成年

あなたは使用すべきです：

  style="margin: 0 auto;width: 100%; background-color: red;">
于 2015-11-24T19:32:50.057 に答える