井字游戏板的引导平方列？答案

【问题标题】：Bootstrap Squared Columns for Tic-Tac-Toe Board?井字游戏板的引导平方列？
【发布时间】：2018-01-28 08:42:09
【问题描述】：

我正在构建一个井字游戏界面，目前使用 HTML、CSS 和 Bootstrap。我试图让电路板完美地平方（1：1），但我一无所获。

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

这个其他版本在电路板的每一侧都有一些“垫”，可以完成这项工作，但在尺寸小于平板电脑时会损坏。除此之外，我失去了太多的空间。

现在，这里是无垫井字游戏的代码：

<!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;
}

无论如何，我会很感激一些关于我做错了什么或我应该做什么的指示。我想我做错了什么，没有充分利用引导程序。

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

【问题讨论】：

这实际上是 CSS 网格的一个很好的用例。你熟悉那个模块吗？
@Tyler，我不是！它们应该与 Bootstrap 一起使用吗？我会看看它！谢谢！
CSS Grids 是一个完全独立于 Bootstrap 的原生 CSS 模块。您可以在此处阅读规范：w3.org/TR/css-grid-1，但读起来很枯燥。更容易理解的地方在这里：css-tricks.com/snippets/css/complete-guide-grid 和这里developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
本质上，如果你有一个你想要的网格布局，CSS Grids 就是专门为此设计的（因此得名）。
@TylerH，天哪。我已经爱上了网格！哈哈，我对整个事情都使用了网格布局+媒体查询。非常感谢你。再见引导程序。

标签： html css twitter-bootstrap responsive-design grid-layout

【解决方案1】：

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

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

然后您将能够删除数字并保持尺寸。

【讨论】：