コードが応答しないのはなぜですか？

-1

私は正しいBootstrap構造体、クラスなどを使用していると思います。なぜブラウザのサイズを変更するとレイアウトが完全に乱れるのですか？私は間違って何をしていますか？コードが応答しないのはなぜですか？

はここ*あなただけのCOL-SM-使用している、あなたのHTMLコード内full code.

body { 
    font-family: 'Roboto', sans-serif; 
} 
h2 { 
    font-size: 32px; 
    font-weight: bold; 
} 
h3 { 
    font-size: 16px; 
    font-weight: bold; 
} 
.container { 
    max-width: 1056px; 
} 
p { 
    font-size: 14px; 
} 
nav.navbar { 
    padding: 12px; 
    border-radius: 0; 
    border: none; 
    margin-bottom: 0; 
    background: none; 
} 
nav.navbar li { 
    font-size: 14px; 
    font-weight: bold; 
    text-transform: uppercase; 
} 
nav.navbar li a { 
    padding: 8px 20px; 
    margin-top: 0.5em; 
    border-radius: 4px; 
} 
nav.navbar li a:link { 
    color: #9faeaf; 
} 
nav.navbar li a.active:link, 
nav.navbar li a.active:visited { 
    color: #fff; 
}

出典

2016-08-06 Sam

あなたはあまりにもHTMLを表示する必要があります場合は、より良いサイトのカスタマイズに役立つために、よりCSS Media Queriesを使用することを検討してください。 – JJJ

おそらくあなたは多くのcssをオーバーライドしました – jonju

@Juhanaそれはすべてcodepenのリンクです。 – Sam

ためにそのコードを使用します。たとえば、section#aboutとすると、スタイルシートに明示的に設定したheight: 980px;を削除すると、ピクセルパーフェクト段落はと重複しなくなります。使用するには最適なテンプレートをお探しですか？タイトル。

第2に、不適切にブートストラップグリッドを使用しています。ほぼすべてのセクションで.containerクラスがあることに気付きました。理想的には、それらを削除し、1ページに異なるコンテナサイズを使用する場合を除いて、1つだけ.containerクラスをカプセル化します。ここで

は一例です：

<body> 
    <div class="container"> 
     <section id="intro" class="row"> 
      <div class="col-md-4"> 
      </div><!-- end .col-md-4 --> 

      <div class="col-md-4"> 
      </div><!-- end .col-md-4 --> 

      <div class="col-md-4"> 
      </div><!-- end .col-md-4 --> 
     </section><!-- end #intro section --> 

     <section id="about" class="row"> 
      <div class="col-md-6"> 
      </div><!-- end .col-md-6 --> 

      <div class="col-md-6"> 
      </div><!-- end .col-md-6 --> 
     </section><!-- end #about section --> 
    </div><!-- end .container --> 
</body>

注：ナビゲーションバー/フッターとの例外がありますが、あなたはすでに行ったようにあなたが別々の容器に内のこれらの要素を置くことができ、その場合、 Navbarと一緒に。

第三に、あなたのページの各垂直セクションの「ブロック」と、より.rowのクラスを使用します。あなたのセクション内でこれを行いましたが、各セクションからコンテナを削除した後に、セクション自体にも.rowクラスを与えて、セクション自体を個別の行にすることをお勧めします。 kosmastskが提案されているよう

次は、は、すべての画面サイズのルールを定義するは必要ありません。 col-smのブレークポイントを定義するだけで表示されるのが好きなら、それはあなた次第です。あなたがmobile firstを開発し、より大きい画面サイズにあなたの方法を働かせれば、それはよりよく見えます。

はまた、あなた必見オーバーライドの高さ、幅、など

出典

2016-08-06 19:54:52

時間を割いていただきありがとうございます。私は最初はすべてのものの周りに単一のコンテナをラップしましたが、その後は全幅の背景を行うことができませんでした。それを回避する方法はありますか？ – Sam

その場合、 '.container-fluid'クラスのすべてをラップし、ブートストラップのCSSをオーバーライドして' .container-fluid'からパディングを削除します。そうすれば、すべてがビューポートの全幅を占めるようになります。その後、全幅の背景を持つことができますが、コンテンツ（テキスト）も全幅になります。これを回避するために、ブートストラップカラムを使用してより小さいコンテナ（例： '.col-xs-10'）と[center that column]（http://stackoverflow.com/a/18153551/5228504）として使用します。そうすれば、通常の '.container'クラスと同じように' .row'やそれ以上のカラムクラスを使用することができます。 –

です。したがって、ブラウザは.sm、.md、.lgクラスに対して構造体を使用しますが、.xsクラス（< 768 px）の処理方法はわかりません。したがって、最初にxsクラスを定義してみてください。はたとえば、あなたがあなたのCSSに明示的な高さのルールを設定しているので、あなたのレイアウトが応答しない主な理由は、すべてのdiv

<div class="col-xs-12 col-sm-4"> ... </div>

出典

2016-08-06 19:31:26 kosmastsk

まだ完全に台無しです。 – Sam

[これをチェック]（http://codepen.io/kosmastsk/pen/OXBYqA）それは良いですか？最初に.xsクラスを使って開発を始めることをアドバイスします。ブートストラップはあなたのためにこのように簡単になります – kosmastsk

コードが応答しないのはなぜですか？

答えて

関連する問題