0

我有一个使用引导程序的 rails 应用程序，我想使用固定的网格布局。

我对此的理解是，固定布局不会拉伸到浏览器页面的完整大小，而是将自身限制在 940 像素宽的标记处。但是，如果页面尺寸减小，固定的“容器”将调整大小以最适合浏览器。

据我所知，我已经正确地遵循了文档，包括了所有应该的文件，但我的固定容器不会随浏览器缩小，它仍然是“固定的”，有人知道为什么吗？

如果有人需要更多代码，请询问。

编码：

Home.html.erb 使用 2 行

            <div class="row">
                <div class="span8">
                <%= render template: "static_pages/winner" %>
                <%= render partial: "static_pages/social_quarter" %>
            </div>

            <div class="span4">
                <%= render partial: "static_pages/nominations_home" %>
            </div>
            </div>

我正在使用“容器”将网站的主要内容包装在

<div class="container">
<%= yield %>
</div>

我在应用程序中包含了以下文件，以及 assets css 目录中的 bootstrap-responsive.css 和这两行来加载响应式样式表和视口。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

应用程序.css

 *= require_self
 *= require_tree .
 *= require_bootstrap

应用程序.js

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap 
//= require_tree .

Bootstrap_overides_and_css

@import "twitter/bootstrap/bootstrap";

body { padding-top: 50px }

@import "twitter/bootstrap/responsive";

文档指出 CSS 元素应该堆叠而不是浮动，我有这个在大多数页面上使用的 div，删除 float 属性并不能解决它。

.article-box {

    float: inherit;
    max-width: auto;
    padding: 20px;
    margin-bottom: 20px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    -moz-box-shadow: 0 0 1px 1px #888;
    -webkit-box-shadow: 0 0 1px 1px #888;
    box-shadow: 0 0 1px 1px #888;
    background-color: #ffffff;

    .large {
        font-size: 30px;
        font-weight: bold;
        line-height: 30px;
    }

    img {   
        max-width: 100%;
        align: left;
    }
}

html源码

<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-responsive.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-affix.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/comment.js?body=1" type="text/javascript"></script>
<script src="/assets/dropdown_toggle.js?body=1" type="text/javascript"></script>
<script src="/assets/modal.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="fc+nZpTjUYkpgqZJ9wVdru1vI/9nhUceJXc6DrNWu9g=" name="csrf-token" />
<meta name="google-site-verification" content="WOjLVAdH_q5FxvYyAnjnVw-jC17kDxd6nc4NhlxdZe0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
4

0 回答 0