Question

我使用bootstrap 3，我的网站有2个cols。左侧内容左对齐，右侧内容右对齐。在较小的显示器上，我将使用1 col。所以正确的col位于左侧col。这很好。

但我希望在较小的显示器上，两个cols都保持对齐。这可能吗？

这是我目前的代码：

<div class="row">
   <div class="col-lg-6 col-md-6 col-xm-12 col-xs-12 text-left">
      content a
   </div>
   <div class="col-lg-6 col-md-6 col-xm-12 col-xs-12 text-right">
      content b
   </div>
</div>

Answer 1

默认情况下，文本左对齐，因此当屏幕大于992px（col-sm max width）时，您可以使用媒体查询将文本右对齐。当屏幕小于992px

时，它将默认返回到左侧

CSS

@media (min-width: 992px){
  #right-col{
    text-align: right;
  }
}

HTML

<div class="row">
   <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
      content a
   </div>
   <div id="right-col" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
      content b
   </div>
</div>

Bootstrap 3 - 具有不同对齐的不同网格尺寸

1 个答案: