Bootstrap 4中心项目仅在小视口上，但在其他大小上没有对齐？

Posted 2023-03-29

【中文标题】Bootstrap 4中心项目仅在小视口上，但在其他大小上没有对齐？

【英文标题】：Bootstrap 4 center items only on small viewport, but no alignment on every other size?

【发布时间】：2019-11-14 15:40:18

【问题描述】：

我是 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"  ></canvas>
            <canvas id="square2"  ></canvas>
            <canvas id="square3"  ></canvas><br />

            <canvas id="square4"  ></canvas>
            <canvas id="square5"  ></canvas>
            <canvas id="square6"  ></canvas><br />

            <canvas id="square7"  ></canvas>
            <canvas id="square8"  ></canvas>
            <canvas id="square9"  ></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 可以登机并且两个按钮可以对齐

【问题讨论】：

这可能对您有帮助吗？ codepen.io/anon/pen/zVaJjG

【参考方案1】：

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

这是因为引导类的这种风格，与 col-md-12 等一样，它作为具有最小宽度的媒体查询工作，其中所有大小及以上的内容都被分配了 css 规则，而不仅仅是该规则（断点） .

【讨论】：

太棒了，谢谢！你介意解释一下为什么 text-sm-left 会产生以较小的视口为中心的效果，而不是仅仅靠左对齐吗？

text-sm-left 将左对齐小断点上的文本，一个小/手机断点，您实际上在引导程序 4 及更高版本上使用 xs 断点（这只是 text-left）。所以 text-left 会影响所有显示尺寸（例如 0 px 及以上） tex-sm-left 只是左断点及以上。