引导文本中心的条件对齐答案

【问题标题】：conditional align for bootstrap text-center引导文本中心的条件对齐
【发布时间】：2022-01-16 22:19:33
【问题描述】：

我使用这样的 div..

<div id="book" class="justify-content-center text-center">

这对于台式机来说很好，但在移动设备上我需要将文本左对齐。我需要在媒体查询中添加什么，以便在移动设备上保持文本左对齐？

@media only screen and (max-width: 480px) {
// What do I add here to "override" the text-center so that it align to left instead?
}

【问题讨论】：

标签： css media-queries

【解决方案1】：

解决方案： 不要覆盖引导类justify-content-center text-center。仅覆盖唯一 ID 簿。

 @media only screen and (max-width: 480px) {
      #book{
        float:left;
      }
    }

<div id="book" class="justify-content-center text-center">
    Test Text
</div>

【讨论】：

【解决方案2】：

看到这个：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<style>

    @media (max-width: 575.98px) {
        .text-center {
            text-align: left !important
        }
    }

    @media (min-width: 576px) and (max-width: 767.98px) {
        .text-center {
            text-align: left !important
        }
    }

    @media (min-width: 768px) and (max-width: 991.98px) {
        .text-center {
            text-align: left !important
        }
    }
</style>

<div id="book" class="justify-content-center text-center">test</div>

此代码生成您期望的输出。

您应该注意，这些 CSS 位于 bootstrap 标记之后。

大屏效果：

小屏效果：

【讨论】：

【解决方案3】：

如果您使用的是 Bootstrap SASS，则将 2 个 Bootstrap 类组合成一个可以完成您工作的新类可能是一个更好的选择。考虑以下几点：

.text-sm-left-md-right { // Give whatever name you want
    @extend .text-start; // or text-left if B4
    @extend .text-md-end; // or text-right if B4.
}

上面的文字将在小屏幕中左对齐，然后在中及以上屏幕中右对齐。这样您就不必在此处放置元素的 ID，并且可以根据需要多次重用该类。

【讨论】：

【解决方案4】：

立即添加 css


@media only screen and (max-width: 480px) {
  .text-center {
    text-align: left !important;
  }
}

但是您必须在引导程序之后导入 CSS，否则引导程序将覆盖您的 CSS，而不是您覆盖它。但还有其他解决方案写 class="text-left text-sm-center"

这意味着sm 屏幕宽度，CSS 居中，左下方sm https://getbootstrap.com/docs/4.0/utilities/text/

【讨论】：