ブートストラップの列が正しく整列されず、一方がもう一方の下にある

誰かが私を助けてくれることを願っています。私はおそらく愚かな間違いをしていますが、私はUdacityのビデオに従っており、コードは同じに見えます。前もって感謝します。ブートストラップの列が正しく整列されず、一方がもう一方の下にある

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Portfolio</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="css/bootstrap.css"> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <img src="images/logo.jpg" alt="Udacity logo"> 
       </div> 
       <div class="col-md-6"> 
        <h1>John Doe</h1> 
        <h4>Front-end Ninja</h4> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

出典

2016-07-20 Phrike

正しいあなたの 'bootstrap.css'へのパスですか？馬鹿に見えるかもしれませんが、それはよくある間違いです。 – trajchevska

はい、私は同じと思った。ファイルのパスは、C：\ Users \ Eden \ Desktop \ Udacity \ IntroからHTML、CSS \ Portfolio \ css、次にbootstrap.cssファイルです。 – Phrike

アクセスしようとする相対パスは、現在開いているhtmlファイルのパスに依存する必要があります。あなたのHTMLファイルが 'Intro to HTML'にあると仮定します。その場合は、CSSパスを 'CSS/Portfolio/css/bootstrap.css'に変更する必要があります。 – trajchevska

最も可能性が高い理由は、あなたのコードは、ブラウザのウィンドウ幅に依存しているということです - コードcol-md-6は992pxまたはより広いのブラウザウィンドウ幅に2つの列を生成します。

クラスを使用する両方のdivについて、クラスcol-md-6をcol-sm-6に置き換えてください。より小さいサイズであっても列が並んで表示されるようにしてください。

また、画面の幅に基づいて列がどのように移動するかを確認するには、画面を広くします。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Portfolio</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="css/bootstrap.css"> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-sm-6"> 
        <img src="images/logo.jpg" alt="Udacity logo"> 
       </div> 
       <div class="col-sm-6"> 
        <h1>John Doe</h1> 
        <h4>Front-end Ninja</h4> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

出典

2016-07-20 20:30:10 Toby

うわー！ありがとう、それは愚かな間違いでした。ブラウザをフルスクリーンで開き、それが変更されました。私はそれを "col-sm-6"に変更すると思います。どうもありがとう！ – Phrike

ブートストラップはモバイル向けのフレームワークです。もしもあなたが何らかの大きさで何かを適用したいのであれば、 'col-xs- *'を使ってください。（ 'sm'でもほとんどの場合動作します） –

上記の回答によると、ブートストラップは意図的に画面サイズに基づいてレイアウトを変えます。レスポンシブデザイン。詳細はこちらをご覧ください：http://getbootstrap.com/css/#grid – Toby

正しいサイズの列を使用していることを確認してください。 xsは768アンペア、smは768と991、mdとlgは991アンペアです。

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>Portfolio</title> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-xs-6"> 
 
        <img src="images/logo.jpg" alt="Udacity logo"> 
 
       </div> 
 
       <div class="col-xs-6"> 
 
        <h1>John Doe</h1> 
 
        <h4>Front-end Ninja</h4> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

出典

2016-07-20 20:30:26 zsawaf

ありがとうございました！ :) – Phrike

すべてはあなたのコードで正常に動作するようです。

http://codepen.io/anon/pen/JKLbvQ

<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Portfolio</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="css/bootstrap.css"> 
    </head> 

    <body> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Udacity logo"> 
       </div> 
       <div class="col-md-6"> 
        <h1>John Doe</h1> 
        <h4>Front-end Ninja</h4> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

出典

2016-07-20 20:35:07

ええ、それは私の窓のサイズを変更する問題でした:) – Phrike

ただ、それは彼らが異なる画面サイズに適切にスケーリングするように、あなたの列に複数のクラスを含めることをお勧めだ正解（https://stackoverflow.com/a/38490294/3718753）へ追加します。

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
 
      <img src="images/logo.jpg" alt="Udacity logo"> 
 
     </div> 
 
     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
 
      <h1>John Doe</h1> 
 
      <h4>Front-end Ninja</h4> 
 
     </div> 
 
    </div> 
 
</div>

出典

2016-07-20 21:08:54 ScarpMetal

ああ、私はそれを実現しませんでした。ありがとうございました！ :) – Phrike

ブートストラップの列が正しく整列されず、一方がもう一方の下にある

答えて

関連する問題