Question

我在引导程序页面中有2列，如下所示：

<div class="col-xs-12 col-sm-6 col-md-8">
</div>
<div class="col-xs-6 col-md-4">
   <div class="container-fluid">
      <div class="row">
      </div>
   <div>
</div>

我想要的中心是右栏（第二栏）。当我减小屏幕尺寸以模拟智能手机设备时，我看到列对齐到左侧。我想要的是将该列中的所有内容集中在小型设备或大型设备中。

Answer 1

使用Bootstrap提供的offset课程：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-8 col-md-offset-0">
      <div class="wrapper">
        <h2>Left column</h2>
      </div>
    </div>
    <div class="col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-0">
      <div class="wrapper">
        <h2>Right column</h2>
      </div>
    </div>
  </div>
</div>

<强>解释

首先，当您使用col-xs-6并且未指定col-sm- *时，在第二列中，这意味着这也是col-sm-6：

<div class="col-xs-6"></div>
<div class="col-xs-6 col-sm-6"></div>

这两行代码是相同的（最好使用第一行代码）。偏移类也是如此（如果指定col-xs-offset-3并且未指定col-sm-offset- *则表示这也是col-sm-offset-3）。

在bootstrap中你有12列。如果您想要居中col-sm-6，则必须将此列偏移3列（col-sm-offset-3 3 + 6 + 3）。

我必须在 md 列中将偏移量指定为0，因为我必须覆盖col-sm-offset-3。如果我不这样做，那就是col-md-offset-3。

CODEPEN EXAMPLE

Answer 2

我会利用Bootstrap class＆＃34; center-block＆＃34;在这种情况下。

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8"></div>
    <div class="col-xs-12 col-md-4">
      <div class="row">
        <div class="center-block"></div>
      </div>
    </div>
  </div>
</div>

实施例： http://www.bootply.com/fWjX4eLAuR

P.S不要使用＆＃34;容器＆＃34;行和列中的类。

Answer 3

我不确定你想要什么，因为它非常简单。

<div class="col-xs-12 col-sm-6 col-md-8">
</div>
<div class="col-xs-6 col-md-4">
   <div class="container-fluid">
      <div class="row">
        <p class="text-center">My text is centered even in a small device</p>
      </div>
   <div>
</div>

如果您想添加虚拟保证金：

<div class="col-xs-12 col-sm-6 col-md-8">
</div>
<div class="col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-3">
   <div class="container-fluid">
      <div class="row">
        <p class="text-center">My text is centered even in a small device</p>
      </div>
   <div>
</div>

在引导程序中居中列

3 个答案:

CODEPEN EXAMPLE