Question

我的tic-tac-toe板太敏感了。我相信有问题的代码就在这里：

          <div class="col-md-1"></div>
          <div class="col-md-6">

              <div class="box" id="A"></div>
              <div class="box" id="B"></div>
              <div class="box" id="C"></div>
              <div class="box" id="D"></div>
              <div class="box" id="E"></div>
              <div class="box" id="F"></div>
              <div class="box" id="G"></div>
              <div class="box" id="H"></div>
              <div class="box" id="I"></div>

          </div>
        <div class="col-md-1"></div>

如果你看看代码板，那么主板就是TOO响应。它甚至会在窗口太大时发生变化。我希望最小/最大窗口尺寸能够保持一个井字棋盘。我已经玩过文档和流畅的选项。是否有一些简单的CSS用于将它们全部捆绑在一起？

Answer 1

添加另一个具有设定宽度的div这样简单的事情将有助于解决您的问题：

<div class="col-md-6">
                <div style="width: 500px;">
                <div class="box" id="A"></div>
                  <div class="box" id="B"></div>
                  <div class="box" id="C"></div>
                  <div class="box" id="D"></div>
                  <div class="box" id="E"></div>
                  <div class="box" id="F"></div>
                  <div class="box" id="G"></div>
                  <div class="box" id="H"></div>
                  <div class="box" id="I"></div>
                </div>
              </div>

Answer 2

Bootstrap容器，行和cols本质上是响应式的。有两种方法可以解决这个问题。

1）将.box元素放入固定宽度的容器中，然后删除响应的col-md-6。

OR

2）使.box元素响应使用现有容器调整大小。

使bootstrap div无响应

2 个答案: