Question

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

<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>

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

1 个答案: