Bootstrap - 在没有媒体查询的情况下在不同断点处的不同文本对齐

Question

我正在使用Bootstrap 3.3.6。我遇到过一种情况，我需要在桌面上对齐文本，但要以移动设备为中心。

假设以下标记（也在spread中）：

<div class="container">
  <div class="row">
    <div class="col-md-3 col-sm-12 col-xs-12">
      <img src="https://via.placeholder.com/150x150">
    </div>
    <div class="col-md-9 col-sm-12 col-xs-12 text-right">
      <p>text here</p>
      <p>another line of text</p>
    </div>
    </div>
  </div>
</div>

我的问题与标记中包含.text-right有关。这是Bootstrap为对齐提供的众多类之一。

我可以将其删除，然后使用媒体查询定位.col-md-9并通过为-md和-sm/-xs设备提供单独的规则来更改文本对齐方式。但是，这样做意味着我实际上必须重写Bootstrap已经包含的CSS（例如将文本与.text-right或中心.text-center对齐）。

我还可以想到Bootstrap提供的预编写类的更复杂的例子。

鉴于在大型/桌面设备和小型/移动设备上使用这些类可能会有所不同，使用媒体查询是否正确，然后重写所有相同的CSS Bootstrap会为您提供这些样式？或者有更好的方法吗？

我理解如何将col-md-9 col-sm-12 col-xs-12之类的东西链接起来以在不同的设备上获得不同的网格布局。但是有一些相同的东西允许你在这些不同的断点处应用其他Bootstrap类......或者只是你必须使用媒体查询然后每次都提供CSS？

简单来说，我要做的就是说：

• .col-md-9 ==使用.text-right
• .col-sm-12（或.col-xs-12）==使用.text-center

我编写分别针对这些事情的媒体查询的问题是，我必须编写诸如text-align: right和text-align: center之类的内容，即使Bootstrap已经提供了执行此操作的类。这些都是简单的例子，显然需要更复杂的CSS规则，这就成了一种负担。