Bootstrap 4 个项目仅在小视口上居中，但在其他所有尺寸上都没有对齐？

Question

我是 Bootstrap 的新手，所以我不确定这是否可行，但我正在尝试做到这一点，以便几个按钮和一个井字游戏板没有对齐（所以就像它们一样）在所有视口尺寸上，但一旦它变小，它们就会居中。

我尝试使用 text-center 和 text-sm-center 但它与我想要的相反（适用于最小的视口和更大的一切，而我希望它适用于最小的但没有别的）。有没有办法去做这件事？我已经包含了我希望它看起来如何的屏幕截图。

    <section class="container" id="game">
        <div class="row">
          <div class="col-12 col-md-6" id="tic">
            <canvas id="square1" width="100" height="100"></canvas>
            <canvas id="square2" width="100" height="100"></canvas>
            <canvas id="square3" width="100" height="100"></canvas><br />

            <canvas id="square4" width="100" height="100"></canvas>
            <canvas id="square5" width="100" height="100"></canvas>
            <canvas id="square6" width="100" height="100"></canvas><br />

            <canvas id="square7" width="100" height="100"></canvas>
            <canvas id="square8" width="100" height="100"></canvas>
            <canvas id="square9" width="100" height="100"></canvas>

          </div>
          <div class="col-md-6" id="rules">
            <h2>RULES</h2>
            /* list of rules */
          </div>
        </div>

        <div class="row">
            <div class="col-6">
                <button id="undo" type="button" class="btn btn-lg btn-warning">Undo Move</button>
            </div>  
            <div class="col-6">
                <button id="new" type="button" class="btn btn-lg btn-info">New Game</button>
            </div>
        </div>

这是在较大的视口上未对齐时的样子

但是当它到达最小的视口时，我希望 tic tac 登上并对齐两个按钮

Answer 1

text-center 表示所有文本将居中，text-sm-center 将使文本在小视点及以上居中，尝试使用 text-center 然后 text-sm-left。

这是因为 bootstrap class 的样式，与 col-md-12 等的样式一样，可以用作带有 min-width 的媒体查询，其中所有大小及以上被分配 css 规则而不是那个规则（断点）。

Bootstrap 4 个项目仅在小视口上居中，但在其他所有尺寸上都没有对齐？

Bootstrap 4 center items only on small viewport, but no alignment on every other size?

css

text

center

button

alignment