当屏幕在XS上时，如何使用Bootstrap将div居中

Question

我想创建一个有4列的div，但是当屏幕在xs上时，我想居中显示任何内容。下面是我的代码：

​

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="container">
    <div class="col-xs-6 col-xs-offset-3 col-sm-3 col-md-3">
      <img src="http://placehold.it/200x200" class="img-responsive" />
    </div>
    <div class="col-xs-6 col-xs-offset-3 col-sm-3 col-md-3">
      <img src="http://placehold.it/200x200" class="img-responsive" />
    </div>
    <div class="col-xs-6 col-xs-offset-3 col-sm-3 col-md-3">
      <img src="http://placehold.it/200x200" class="img-responsive" />
    </div>
    <div class="col-xs-6 col-xs-offset-3 col-sm-3 col-md-3">
      <img src="http://placehold.it/200x200" class="img-responsive" />
    </div>
  </div>
</div>

​

但是在默认视图中，它显示了xs-6，所以我得到了2列。我不知道为什么，因为我将我的列设置为md-3

Answer 1

您必须使用col-*-offset-0类覆盖较低的偏移量：

​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="container">
    <div class="col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-0 col-md-3 col-md-offset-0">
      <img src="http://placehold.it/200x200" class="img-responsive" />
    </div>
     <div class="col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-0 col-md-3 col-md-offset-0">
      <img src="http://placehold.it/200x200" class="img-responsive" />
    </div>
     <div class="col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-0 col-md-3 col-md-offset-0">
      <img src="http://placehold.it/200x200" class="img-responsive" />
    </div>
     <div class="col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-0 col-md-3 col-md-offset-0">
      <img src="http://placehold.it/200x200" class="img-responsive" />
    </div>
  </div>
</div>

​