使引导 div 不响应答案

【问题标题】：Make bootstrap divs NON-responsive使引导 div 不响应
【发布时间】：2015-10-15 00:47:38
【问题描述】：

我的井字棋反应太灵敏了。我相信有问题的代码在这里的某个地方：

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

如果您查看代码笔，则该板反应太快了。当窗口太大时，它甚至会发生变化。我希望最小/最大窗口大小保持井字游戏板。我玩过文档和流畅的选项。是否有一些简单的 css 可以用来将它们捆绑在一起？

【问题讨论】：

getbootstrap.com/examples/non-responsive
也许可以使用您自己的类，只在需要的地方使用媒体查询，以在较小的屏幕设备上保持干净和正常？
我认为该文档不适用？

标签： html css twitter-bootstrap responsive-design

【解决方案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>

【讨论】：

谢谢，这就是我所需要的

【解决方案2】：

引导容器、行和列本质上是响应式的。有两种方法可以解决这个问题。

1) 将您的 .box 元素放在一个固定宽度的容器中并移除响应式 col-md-6。

或

2) 使您的 .box 元素响应调整现有容器的大小。

【讨论】：