Yii2 中的全宽容器或 jumbotron 与 Material Bootstrap 库答案

【问题标题】：Full width container or jumbotron in Yii2 With Material Bootstrap LibraryYii2 中的全宽容器或 jumbotron 与 Material Bootstrap 库
【发布时间】：2016-02-27 07:56:54
【问题描述】：

我正在尝试使用 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。

我已经尝试了所有有关此的方法，但问题仍然存在并且不是全宽。

【问题讨论】：

标签： css twitter-bootstrap yii2 material-design bootstrap-material-design

【解决方案1】：

如果你想要全宽

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

那么你必须删除这一行：

 class="container"

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

只是一个小问题

你应该使用：

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

【讨论】：

不起作用我不知道为什么！代码：paste.ofcode.org/BLGcnjpDmv4M2Z8KeJYnBD
你有没有从布局（main.php）中获取类名？我已经更新了答案..
thanks.the question 用这句话解决了：remember to remove this class also from the layout you are using 但是，最好的方法是什么，我的意思是，你将如何处理这些行，当然还有主要内容？我的意思是，你会使用什么类或类似的东西？因为一切都会搞砸的！没有容器 - paste.ofcode.org/wxhYED6RLEmYvXXhiL5nSf tnx 再次
如果我的回答是正确的，请标记为已接受。对于您的最后一个问题，在您的应用程序中始终使用无容器样式的最佳方式然后删除此表单yuor布局（main.php），否则创建正确的布局，并且当您需要更改对控制器/操作中布局的引用时。如果您需要，您还可以定义一个您的类（例如：在 yourapp/web/css/site.css 中）并在该类中分配您需要的样式。我希望这是您正在寻找的，否则请发布更清晰的问题..
最后我做到了，不需要任何删除或类似的东西。只是一个技巧。谢谢

【解决方案2】：

要使 jumbotron 全宽且没有圆角，请将它在所有 .containers 之外，而是在其中添加一个 .container。

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

【讨论】：