Question

我正在构建一个Tic-Tac-Toe界面，目前正在使用HTML，CSS和Bootstrap。我试图让棋盘完全平方（1：1），但我无处可去。

盒子必须更高，以便占用更多空间。我可以使用列上的height / vw单位使用vh属性，但他们不会在所有分辨率上保持1：1的比例。

这个版本有一些＆＃34; pad＆＃34;在板的每一侧并完成工作，但打破尺寸小于平板电脑。除此之外，我失去了太多的空间。

现在，这里是没有垫的Tic Tac Toe的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Tic Tac Toe</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
  <script src="js/script.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 col-sm-2 ads"> "ads </div>
      <div class="col-12 col-sm-6 content">
        <div class="container-fluid tic-container">
          <div class="row tic-row">
            <div class="col-4 tic-box"> 1 </div>
            <div class="col-4 tic-box"> 2 </div>
            <div class="col-4 tic-box"> 3 </div>
          </div>
          <div class="row tic-row">
            <div class="col-4 tic-box"> 4 </div>
            <div class="col-4 tic-box"> 5 </div>
            <div class="col-4 tic-box"> 6 </div>
          </div>
          <div class="row tic-row">
            <div class="col-4 tic-box"> 7 </div>
            <div class="col-4 tic-box"> 8 </div>
            <div class="col-4 tic-box"> 9 </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-2 tic-panel"> PANEL-THINGY<br>Score:<br>Foo bar: stuff<br> Reset game and all that blah </div>



      <div class="col-12 col-sm-2 ads"> ads </div>
    </div>
  </div>
</body>

</html>

.ads{
  text-align: center;
  margin: .4vw 0;
  background: #F4CC70;
  padding: .4vw;
}

.content{
  margin: .4vw 0;
  background: lightblue;
  padding: .4vw;
}
.tic-panel{
  border: solid 2px black;
  margin: .4vw 0;
  background: #66A5AD;
  padding: .4vw;
}

.tic-box{
  border: solid black 1px;
  font-size: 5vw;
  background: #6AB187;
  text-align: center;
  color: lavender;
}
.tic-box:hover{
  background: #20948B;
}

无论如何，我希望能指出一些错误或我应该做的事情。我想我做错了什么，没有充分利用bootstrap。

另外，如果你能告诉我是否违反了引导原则，我会很高兴，例如使用rows或col我不应该这样做。

Answer 1

将以下属性添加到“ tic-box”类：

.tic-box {
  width: 85px;
  height: 85px;
}

然后，您将可以删除数字并保持尺寸。

Tic-Tac-Toe Board的Bootstrap Squared Columns？

1 个答案: