Question

我正在尝试创建一个3 x 3的黑白网格。但相反只显示黑色方块。我尝试过使用Bootstrap。

根据自举网格系统，我的网格的一个方格应覆盖3个网格空间，我使用padding-top:100%来保持3乘3网格中正方形的宽高比。

＆＃13;

body {
  margin: 0;
  color: pink;
}

.square {
  width: 100%;
  padding-top: 100%;
  background-color: black;
}

.square-w {
  width: 100%;
  padding-top: 100%;
  background-color: white;
}

＆＃13;

<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>

＆＃13;

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>

希望这能帮到你

创建黑白网格HTML / CSS

2 个答案: