web-dev-qa-db-ja.com

コンテンツとヘッダーの重複を防ぐためにBootstrap bodyにパディングを追加する正しい方法

Bootstrap=で本体の上部、ナビゲーションバーの後ろにあるメインコンテナを停止するには、次のようにパディングを追加する必要があります。

<link href="css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

パディングは、小さなデバイスで問題が発生せず、サイトの応答性が損なわれないように、bootstrap.cssとbootstrap-responsive.cssの間で宣言する必要があります。

私の質問：

Bootstrap Customize からダウンロードしたcombinde bootstrap.cssファイルを使用しています。これは、レスポンシブCSSと通常のCSSを1つのファイルに結合したものです。

それらは1つのファイルにまとめられているため、bootstrap.cssファイルに修正を実際に追加することなく、この質問の冒頭で説明したソリューションを使用できないことを意味します（そこには追加しません、長い話） 。

だから私はこのコードを置く代わりに考えていました（小さなデバイス用の@media修正付き）：

body {  padding-top: 60px; } 
@media (max-width: 979px) { body { padding-top: 0;  } }

私自身のcssファイル（main.css）に入れて、bootstrap.cssの後にそれをhtmlに含めて、次のようにします：

<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">


この解決策は受け入れられると思いますか？

twitter-bootstrapresponsive-designnavbar
33
Jamie Fearon

はい、あなたの解決策は受け入れられます。

したがって、最初に結合された1つまたは2つのBootstrapファイルがあり、ナビゲーションバーが必要な場合、これは小さな画面で大きなパディングを回避する方法です。

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style>
  body {
    padding-top: 60px;
  }
  @media (max-width: 980px) {
    body {
      padding-top: 0;
    }
  }
</style>
43
Lipis

Bootstrap 2.3.xでは、このパディングをCSSで修正できます。

body > .container {
  padding-top: 40px;
  background-color: white;
}

/*
 * Responsive stypes
 */
@media (max-width: 980px) {

  body > .container {
    padding-top: 0;
  }
  .navbar-fixed-top {
    margin-bottom: 0;
  }

} /* END: @media (max-width: 980px) */

hTMLファイルは次のようになります

<html>
<body>

  <div class="navbar navbar-fixed-top">
   ...
  </div>

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

</body>
</html>

Twitterの応答CSSファイルでは、トップメニュー行にclass="navbar-fixed-top" with margin-bottom: 20px;画面幅が980px。

これが誰かを助けることを願っています。

3
Anton Danilchenko