Yii2 中的全宽容器或超大屏幕带有 Material Bootstrap 库

Question

我正在尝试使用 jumbotron 或类似的东西获得全宽容器：

<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 和 Yii2。

我已经尝试了一切，但问题仍然存在，而且它不是全宽的。

Answer 1

如果你想要全角

您不必在您的页面中使用 container，并且记得从您正在使用的布局中也删除此 class。（或者你可以定义一个没有这个 class 的布局，并在呈现页面之前在你的操作 $this->layout= "yourNewLayout"; 中设置）通常默认布局位于 /view/layouts/main.php

那么你必须删除这一行：

 class="container"

然后你可以看到一个完整的 yii2 网络应用程序。

只是未成年人

你应该使用：

  style="margin: 0 auto;width: 100%; background-color: red;">

Answer 2

To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within.

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

见Docs

并且由于您正在使用 Bootstrap-Material，您可以使用内置的类添加颜色（这取决于 material-fullpalette.css，不是material.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>

Yii2 中的全宽容器或超大屏幕带有 Material Bootstrap 库

Full width container or jumbotron in Yii2 With Material Bootstrap Library

css

twitter-bootstrap

yii2

material-design

bootstrap-material-design