ブートストラップの正しいコードは何ですか？

-2

私はチュートリアルに従おうとしています。講師は私のコードを次のようにコピーしました。ブートストラップの正しいコードは何ですか？

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 

<title>Bootstrap Practise</title> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 

</head> 
<body> 
<div class="Container"> 

<div class="row"> 
    <div class="col-lg-1 bg-warning"> 
     1 
    </div> 

    <div class="col-lg-1 bg-info"> 
     2 
    </div> 
    <div class="col-lg-1 bg-danger"> 
     3 
    </div> 
    <div class="col-lg-1 bg-success"> 
     4 
    </div> 
    <div class= "col-lg-1 bg-warning"> 
     5 
    </div> 
    <div class="col-lg-1 bg-info"> 
     6 
    </div> 
    <div class="col-lg-1 bg-danger"> 
     7 
    </div> 
    <div class="col-lg-1 bg-success"> 
     8 
    </div> 
    <div class="col-lg-1 bg-warning"> 
     9 
    </div> 
    <div class="col-lg-1 bg-info"> 
     10 
    </div> 
    <div class="col-lg-1 bg-danger"> 
     11 
    </div> 
    <div class="col-lg-1 bg-success"> 
     12 
    </div> 


</div> 

</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">  </script> 


<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

</body> 
</html>

私は正確にインストラクターコードを重複している、と彼はそれを実行したとき、彼はそれぞれの側で空白で、容器に12列を取得します。私はそれを実行すると、私は画面全体を占める12行を取得し、画面サイズを小さくするとスタックしません。

出典

2017-01-28 Diablo

でclass="Container"を交換してください。また、（あなたの質問のその部分の助けが必要な場合）あなたが働いていないコードを入れても役に立ちます。 –

'bootstrap.min.css'はコアブートストラップCSSです（ブートストラップを使用する必要があります）。 'bootstrap-theme.min.css'はスタイリングのためのオプションのテーマです – ZimSystem

そのコードは私のために働きます。私の推測では、ブートストラップスタイルシートを正しくロードしていないということです。デベロッパーコンソールを確認し、これらのファイルを読み込む際にエラーがないかどうかを確認してください。 –

あなたは大画面であなたのソリューションを確認するか、COL-MD-Xの代わりに使用する必要がCOL-LG-X

出典

2017-01-28 17:07:12 CreativeNitish

あなたはあなたのコードに誤りがあります。

私は三行目が表示されていないclass="container"

出典

2017-01-28 17:19:14 pbenard

あなたはいいですね。私は数日間それを修正しようとしています。飲み物は私の上にある。私は今、両側に空白を入れたコンテナ（小c）を持っています。今私はちょうど家庭教師のように私のデスクトップに12列を持っていない理由を理解する必要があります。私のブラウザは1094ピクセル幅で、全幅ではまだ12行あります。しかし、FirefoxでレスポンシブデザインMを実行し、サイズを1280に増やすと、12個の列が表示されますが、水平方向のスクロールが表示されます。 pbnardに2のために2のために行ってください！ ; =） – Diablo

@Diablo col-lgをcol-xsで変更する – pbenard

ブートストラップの正しいコードは何ですか？

答えて

関連する問題