0

ここに画像の説明を入力してください

レスポンシブウェブデザインを学ぶために、私はブートストラップを使ってデザインする方法を自分自身に教えています。基本的なグリッドを作成しました。グリッドのコードを以下に示します。

HTML：

<div class="row">
  <div class="span6 red01">span6</div>
  <div class="span6 green01">span6</div>
</div>

CSS：

body { padding: 0px; }
.red01 { background: #ff0000; }
.green01 { background: #00ff00; }

Webページに2つのdivが表示されますが、問題はそれらがどのように配置されているかです。ノートパソコンの画面全体に水平に配置したいと思います。これをいじってみましたが、うまくいきません。誰かが彼らの専門知識を貸してくれませんか？

4

1 に答える 1

0

このJSfiddleをチェックしてください

結果はこちら2列の結果

  <div class="container">  
       <div class="row">  
          <div class="span12">  
             <h1>Bootstrap 12 col spanning full page</h1>   
   </div>
           <div class="span6">  
              <p> Paragraph test col1</p>   
       </div>  
       <div class="span6">  
               <p> Paragraph test col2.</p>   
        </div>  
       </div>  
    </div>

.container class-> bootstrap.css で事前定義された固定幅のラッパーです。

.container-fluid-> 流体ラッパーです

.row--> このクラスは、列の行を含むように構築されています。新しい行ごとに、必要に応じて列をレイアウトするための新しいゾーンが作成されます。

于 2013-02-18T03:14:07.920 に答える