使用 Bootstrap 在小屏幕上将左/右对齐的列移动到中心

Question

我有一个基本页眉，最左边有一个徽标，最右边有文字（右对齐）。随着页面变小，文本与徽标重叠，看起来不太好。

Fiddle here:

<div class="container">
  <div class="row">
    <div class="col-xs-2">
      <img src="https://unsplash.it/100/100/?random" class="img-circle" alt="placeholder">
    </div>
    <div class="col-xs-10 text-right text-uppercase">
      <h1>Scooby Doo</h1>
      <h3>Where are you</h3>
    </div>
  </div>
</div>

我怎样才能让所有内容都移到中间并让我的列在小屏幕上居中？ （顶部的标志，下面的文字）倾注在 Bootstrap 文档上，无法用网格系统弄清楚。如果 Bootstrap 不允许这种重新定位，有没有办法使用自定义 css/媒体查询？

Answer 1

您可以使用 col-sm 和 col-xs 的组合来确保它们不重叠

Fiddle

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-2">
      <img src="https://unsplash.it/100/100/?random" class="img-circle" alt="placeholder">
    </div>
    <div class="col-xs-12 col-sm-10 text-right text-uppercase">
      <h1>Scooby Doo</h1>
      <h3>Where are you</h3>
    </div>
  </div>
</div>

至于对齐文本，您可以使用这些媒体查询：https://github.com/twbs/bootstrap/issues/11292

或者，如果您要复制块，您可以使用 hidden-xs 和 visible-xs 实现您想要的，但是我不建议复制它降低了可维护性，但我添加它是为了使答案完整，因为它是一个选项。

查看此Fiddle，它会为您提供此代码

<div class="container">
  <!-- Hidden only on XS, not centered -->
  <div class="row hidden-xs">
    <div class="col-sm-2">
      <img src="https://unsplash.it/100/100/?random" class="img-circle" alt="placeholder">
    </div>
    <div class="col-sm-10 text-right text-uppercase">
      <h1>Scooby Doo</h1>
      <h3>Where are you</h3>
    </div>
  </div>

  <!-- Only visible on XS, centered-->
  <div class="row visible-xs">
    <div class="col-xs-12 text-center">
      <img src="https://unsplash.it/100/100/?random" class="img-circle" alt="placeholder">
    </div>
    <div class="col-xs-12 text-center text-uppercase">
      <h1>Scooby Doo</h1>
      <h3>Where are you</h3>
    </div>
  </div>
</div>