bootstrap 文本中心的条件对齐

Question

我用的是这样的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?
}

Answer 1

解法： 不要覆盖 bootstrap 类 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>

Answer 2

马上添加 css


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

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

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

Answer 3

看到这个：

<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 标记之后。

大屏幕结果：

小屏幕的结果：

Answer 4

如果您正在使用 Bootstrap SASS，将 2 个 Bootstrap class 组合成一个新的 class 来完成您的工作可能是更好的选择。考虑以下因素：

.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，并且可以根据需要多次重复使用 class。

bootstrap 文本中心的条件对齐

conditional align for bootstrap text-center

css

media-queries