使用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 and 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>