Question

当屏幕为sm或xs时，我无法将列置于引导程序中心。

小提琴在这里https://jsfiddle.net/iggyfiddle/DTcHh/34028/。这就是我所说的：

当屏幕很大（或中等）时，我没有问题。它出现居中。

当屏幕开始变小时，它开始变得明显。如果你注意到，整个列堆栈向左倾斜，在右边留下一些空格（我添加红色bg用于强调。很难说bg是白色的时候）。

当屏幕是xs时，它更加明显。请注意，一切都向左倾斜，在右侧留下了很多空间。

我看到一篇颇受欢迎的SO帖子，解决了类似的问题here。解决方案建议float: none; margin: 0 auto;，我做了 - 但它没有做任何事情。我也试过添加center-block类，但结果仍然没有。

我需要做什么才能使我的列居中？我的目标是在xs屏幕上，我想要堆叠一列。当它在sm屏幕上时，我希望有两列，并排，堆叠。任何更大的东西都应该有4个相邻的列。

Answer 1

这是因为您在.card上使用了宽度。将margin: 0 auto添加到.card课程将解决您的问题。

Answer 2

我也尝试过添加中心块类，但结果仍然没有。

那是因为你正在使用bootstrap 3.0。引导程序3.1中添加了.center-block。如果你可以升级到3.1（甚至更好，当前版本3.3.7），.center-block修复了它。

如果没有，您可以使用@media (max-width: 992px) { .card { margin: auto; } }

我在下面的解决方案中使用了两者。

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.col-centered {
  margin: 0 auto;
}

@media (max-width: 992px) {
  .col-centered .card { 
    margin: auto; 
  } 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-3 col-sm-6 col-xs-12 col-centered center-block">
      <div class="card center-block" style="width: 200px;">
        <img class="card-img-top img-circle img-responsive" style="margin:0 auto;" src="http://placekitten.com/g/150/150" alt="Card image cap">
        <div class="card-block">
          <h4 class="card-title text-center">Card title 1</h4>
          <p class="card-text text-justify">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12 col-centered center-block">
      <div class="card center-block" style="width: 200px;">
        <div class="card-block">
          <h4 class="card-title text-center">Card title 2</h4>
          <p class="card-text text-justify">Omnichannel CPM call-to-action low hanging fruit branding. Inbound holistic tweens dynamic content branding granular. Mission critical lean content snackable content drone inbound. Leading the pack buzzword flat design click bait B2C conversions millennials. Alignment pass the clap content marketing multiple points of entry context.</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12 col-centered center-block">
      <div class="card" style="width: 200px;">
        <img class="card-img-top img-circle img-responsive" style="margin:0 auto;" src="http://placekitten.com/g/150/150" alt="Card image cap">
        <div class="card-block">
          <h4 class="card-title text-center">Card title 3</h4>
          <p class="card-text text-justify">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12 col-centered center-block">
      <div class="card" style="width: 200px;">
        <div class="card-block">
          <h4 class="card-title text-center">Card title 4</h4>
          <p class="card-text text-justify">Conversions buzzword trending brand voice B2C curated ideation. Branding user-friendly hashtag tablet click-through rate disrupt iterative. CRM alignment The Cloud visibility taste makers. CRM snackable content engagement millennials. Content marketing integrated big data. Tablet shoptimization intuitive top influencers reaching out.</p>
        </div>
      </div>
    </div>

  </div>

Answer 3

你使用过固定的200xx，我只是在小提琴中运行代码。如果你删除高度：200px;并使用带有卡块部分的.text-center类，然后一切都将居中。但主要问题是你使用过bootstrap-3.0.0，使用最新版本的Bootstrap问题会立即解决....

Answer 4

我认为它与this link

重复

从v3.0.1开始，Bootstrap有一个名为center-block的内置类，它使用margin：0 auto但缺少float：none。您可以将其添加到CSS中，以使其与网格系统一起使用。

检查上述链接可能对您有所帮助。

如何将col-xs-12置于引导程序中心？

4 个答案: