黒と白のグリッドを作成するHTML/CSS

3 x 3の白黒のグリッドを作成しようとしています。しかし、代わりに黒い四角だけが表示されます。私はブートストラップを使ってみました。黒と白のグリッドを作成するHTML/CSS

グリッドの1つの正方形は、ブートストラップグリッドシステムごとに3つのグリッドスペースをカバーする必要があります。padding-top:100%を使用して、3×3グリッドの四角形の縦横比を維持しています。あなたの画面表示が小さすぎる可能性があります

body { 
 
    margin: 0; 
 
    color: pink; 
 
} 
 

 
.square { 
 
    width: 100%; 
 
    padding-top: 100%; 
 
    background-color: black; 
 
} 
 

 
.square-w { 
 
    width: 100%; 
 
    padding-top: 100%; 
 
    background-color: white; 
 
}

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

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-md-3"> 
 
     <div class="square"></div> 
 
    </div> 
 
    <div class=" col-md-3 "> 
 
     <div class="square-w"></div> 
 
    </div> 
 
    <div class=" col-md-3 "> 
 
     <div class="square"></div> 
 
    </div> 
 

 
    </div> 
 
    <div class="row"> 
 
    <div class=" col-md-3"> 
 
     <div class="square-w"></div> 
 
    </div> 
 
    <div class="col-md-3 "> 
 
     <div class="square"></div> 
 
    </div> 
 
    <div class="col-md-3"> 
 
     <div class="square-w"></div> 
 
    </div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-md-3 "> 
 
     <div class="square"></div> 
 
    </div> 
 
    <div class="col-md-3 "> 
 
     <div class="square-w"></div> 
 
    </div> 
 
    <div class="col-md-3 "> 
 
     <div class="square"></div> 
 
    </div> 
 
    </div> 
 

 

 
</div>

出典

2017-05-22 dodo

問題の内容がわかりません。上記のデモには白と黒の四角形があります。私が見る唯一の問題は、四角形の間にある左右のパディングが欲しくなく、12列あるのでグリッド全体を塗りたい場合は 'col-md-4'を使いたいということです。より小さな列クラスを使用する必要がある可能性もあります。 – hungerstar

多分あなたはここでいくつかのインスピレーションを見つけることができます：[純粋なHTMLとCSSを使用して作品とチェス盤]（http://code2care.org/pages/chessboard-with-pieces-using-pure-html-and-css/） –

さて、あなたのものは9列分です。正しい列クラス・サイズを使用していますか？あなたが取り組んでいる画面の大きさはどれくらいですか？ – hungerstar

。あなただけのCSSのコードの下に

.nopadding { 
    padding: 0 !important; 
    margin: 0 !important; 
}

を配置し、すべてのにnopaddingクラスを割り当てる必要がhttps://jsfiddle.net/2k5523ym/1/

出典

2017-05-22 13:56:23 SimpleStudent

私はラップトップでそれを見ましたが、まだ1つの正方形しか見えませんでした。 – dodo

： col-sm-3にすべてcol-md-3のクラスを変更すると、それは私の見解

JSFiddleに示すことを可能にしますcol-md-3 div

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

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-3 nopadding"> 
     <div class="square"></div> 
    </div> 
    <div class=" col-md-3 nopadding"> 
     <div class="square-w"></div> 
    </div> 
    <div class=" col-md-3 nopadding"> 
     <div class="square"></div> 
    </div> 

    </div> 
    <div class="row"> 
    <div class=" col-md-3 nopadding"> 
     <div class="square-w"></div> 
    </div> 
    <div class="col-md-3 nopadding"> 
     <div class="square"></div> 
    </div> 
    <div class="col-md-3 nopadding"> 
     <div class="square-w"></div> 
    </div> 
    </div> 

    <div class="row"> 
    <div class="col-md-3 nopadding"> 
     <div class="square"></div> 
    </div> 
    <div class="col-md-3 nopadding"> 
     <div class="square-w"></div> 
    </div> 
    <div class="col-md-3 nopadding"> 
     <div class="square"></div> 
    </div> 
    </div> 


</div>

希望のある方は

出典

2017-05-22 14:01:32

黒と白のグリッドを作成するHTML/CSS

答えて

関連する問題