Question

我想创建一个包含4列的div但是当屏幕显示在xs时，我想要将内容放在中心位置。这是我的代码：

＆＃13;

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

＆＃13;

但是在默认视图中它会显示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>

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

1 个答案: