創建黑白網格HTML / CSS

Question

我正在嘗試創建一個3 x 3的黑白網格。 但是相反，僅顯示黑色正方形。 我嘗試使用Bootstrap。

根據自舉網格系統，我的一個正方形網格應覆蓋3個網格空間，並且我使用padding-top:100%來保持3 x 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> 

Answer 1

您的屏幕視圖可能太小。 將所有col-md-3類更改為col-sm-3可以在我的視圖中顯示它

JSFiddle： https ：//jsfiddle.net/2k5523ym/1/

Answer 2

您只需要在CSS中放置以下代碼

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

然后將nopadding類分配給每個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>

希望這對您有幫助