ブートストラップを使用する Rails アプリがあり、固定グリッド レイアウトを使用したいと考えています。
これについての私の理解では、固定レイアウトはブラウザー ページのフル サイズに拡張されるのではなく、940 ピクセル幅のマークで制限されるということです。ただし、ページのサイズが縮小されると、固定された「コンテナー」はブラウザーに最適なサイズに変更されます。
私の知る限り、私はドキュメントを適切にフォローし、必要なすべてのファイルを含めましたが、固定コンテナーはブラウザーで縮小されず、「固定」のままです。理由は誰にもわかりますか?
誰かがさらにコードを必要とする場合は、尋ねてください。
コード：
2 行を使用する Home.html.erb
<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>
次のファイルをアプリに含め、アセットの css ディレクトリに bootstrap-responsive.css を含め、レスポンシブ スタイル シートとビューポートを読み込むこれら 2 行を含めました。
<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">