私のHTMLでは、コンテンツは画面の中央に配置する必要があり、彼の幅は950pxを超えてはなりません。
これと同じHTMLをモバイルとデスクトップに表示したいので、レイアウトをレスポンシブにするためにTwitterブートストラップを使用しています。
問題は次のとおりです。コンテンツdivを中央に配置し、最大幅を950pxにすることができないようです。
ブラウザで開くと、cssには次のメディアクエリがあります。
@media (min-width: 1200px)
これにより、divは常に画面全体に収まります。
どうすればこれを修正できますか?
基本的に私がやりたいのは次のようなものです。
オレンジ色の線はコンテナ(または本体)で、青色は行です
助けてくれてありがとう。
編集
誰かが私を助けるのを助けるかもしれないと私が見つけたちょうど何か
この行をコメントアウトすると:
@import "twitter/bootstrap/responsive";
私div.content
は950pxの幅を維持しますが、私のhtmlは応答性のある動作を失います。
編集2
htmlマークアップ:
<html>
<body>
<div class="container">
<div class="row">
<div class="span12">
<%= Content goes here %>
</div>
</div>
</div>
</body>
</html>
しかし、ブラウザでは次のようなものが作成されます。
body = 100% width, on chrome 1280px
.container = width 1170px
.row = width 1200px
.span12 = width 1170px
明確にするために、これはtwitterブートストラップの問題ではなく、twitter-bootstrap-railsの問題です。
開発時に修正する方法は、twitter-bootstrap-rails gemをgem-openで開き、ファイルを変更することです。/vendor/toolkit/twitter/bootstrap/responsive.less
これらの行をコメントアウトします。
// LARGE DESKTOP & UP
// ------------------
@media (min-width: 1200px) {
// Fixed grid
#grid > .core(70px, 30px);
// Fluid grid
#grid > .fluid(5.982905983%, 2.564102564%);
// Input grid
#grid > .input(70px, 30px);
// Thumbnails
.thumbnails {
margin-left: -30px;
}
.thumbnails > li {
margin-left: 30px;
}
}