3

私の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;
  }

}
4

4 に答える 4

4

ラッパーを使用すると、デフォルトのサイズは940pxになります。

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

ただし、カスタム幅を探している場合は、次のようにapplication.cssにcssを追加する必要があります。

body .container{
  width:980px;
}

ここでそれをチェックしてください：ブートストラップ-レイアウト

レイアウトの優れたチュートリアル：ブートストラップでレイアウトを埋める

于 2012-08-10T05:39:46.760 に答える
1

レイアウトを必ずでラップしてください<div class="container">。これにより、中央に固定されたレイアウトが作成されます。これが機能しない場合は、レイアウトに何か問題がある可能性があります。その場合は、レイアウトHTMLで質問を更新してください。

ドキュメント：http ：//twitter.github.com/bootstrap/scaffolding.html#layouts

于 2012-08-10T05:26:35.163 に答える
1

レスポンシブメディアクエリの開始時に（それらのいずれかの前に）、要素を「最大幅」に設定します 

body{max-width:1200px;margin:0px auto;}

ブラウザの幅を狭くしてもサイトは引き続き応答しますが、1200ピクセルより大きく開くと（多くの適切なワイドスクリーンディスプレイ）、1200ピクセルのコンテナのままになります。

1200pxを超えても中央に配置するには、同じコンテナに次を追加します

body{max-width:1200px;margin:0px auto;}

上記は、要素の左側と右側に「自動」マージンを追加します。これは、要素が中央に配置されることを意味します...（0pxは、上下にマージンがないことを意味します。必要に応じて追加できます。

すべてをボディに追加する必要はありませんが、それは単にそれが高レベルで邪魔にならないことを意味することに注意してください。

于 2012-10-17T19:00:05.753 に答える
0

どうやらそれは私が使っていたtwitter-bootstrapgemのバージョンのバグだったようです。

そのプロジェクトを削除したため、その環境でテストできなくなりました。新しいプロジェクトでtwitter-bootstrapを再試行しても、このエラーは再度表示されませんでした。

だから私はそれが閉じていると思います。みんなありがとう

于 2013-03-20T13:57:24.760 に答える