2016-05-18 4 views
0

これは簡単ですが、私は常にプランナーで作業する単純なブートストラップの例を得ることに失敗しています。twitterのブートストラップをplunkerで動かすには?

私はmy plunker projectで、この単純なブートストラップ例があります:私は、ブートストラップを利用できないように見える実行]ボタンをヒットした場合

<!DOCTYPE html> 
<html> 

    <head> 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     </div> 
     <div class="row"> 
     <div class="col-md-8">.col-md-8</div> 
     <div class="col-md-4">.col-md-4</div> 
     </div> 
     <div class="row"> 
     <div class="col-md-4">.col-md-4</div> 
     <div class="col-md-4">.col-md-4</div> 
     <div class="col-md-4">.col-md-4</div> 
     </div> 
     <div class="row"> 
     <div class="col-md-6">.col-md-6</div> 
     <div class="col-md-6">.col-md-6</div> 
     </div> 
    </div> 
    </body> 

</html> 

を。 Chromの部門を調べると、そのブートストラップがあることがはっきりと分かります。しかし、フォーマットは全くありません。

プレビューボタンを押した場合、すべてのものが予期したとおりにフォーマットされます。

これを解決する方法はありますか?

+1

あなたはプレビューウィンドウを増やすなら、あなたはそれをあなたが望むように表示されます。..ウィンドウ幅が小さく、デバイスの幅に該当するので、どうなる.. – Bhagya

答えて

1

プレビューウィンドウの幅が十分ではありません。

代わりcol-md-1col-xs-1col-sm-8を使用してみてください...!:-)

+1

はい:)それは問題です。 – Bhagya

+0

https://plnkr.co/edit/Sze1AOpDP9ll3OX9wchJ?p=preview –

+0

ではなく、代わりに、より小さいデバイス用のそれぞれのクラスを使用します。 –

関連する問題