Bootstrap-在不同断点的不同文本对齐方式,无需媒体查询

最后发布: 2017-10-16 10:49:36


问题

我正在使用Bootstrap 3.3.6。 我遇到了一种情况,我需要在桌面上对齐文本,而在移动设备上居中对齐。

假设以下标记(也在jsfiddle中 ):

<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(例如,将文本right与.text-right或center .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

我编写分别针对这些问题的媒体查询的问题是,即使Bootstrap已经提供了执行此操作的类,我也必须编写诸如text-align: righttext-align: center之类的东西。 这些是简单的示例,显然,在需要更复杂的CSS规则的地方,这成为了负担。

html css twitter-bootstrap