引导网格无法使用 xs 列答案

【问题标题】：Bootstrap grid won't work using xs columns引导网格无法使用 xs 列
【发布时间】：2017-10-02 15:52:24
【问题描述】：

我在 Codepen 上开始了一个新项目，我正在使用引导程序。我已经有一段时间没有使用 CSS 了。网格系统对我没有响应，我找不到问题。我什至复制了一个可以工作的旧项目，但也没有工作..

这是笔：http://codepen.io/Chantun/pen/NjgpaY

这是html：

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-offset-3 col-xs-6">
      <h1>FFC Calculator</h1> 

      </div>
    </div>
  </div>
</body>

这是 CSS：

body {
  position: relative;
  margin-top: 60px;
  font-family: Arimo, 'Roboto Slab', serif;
  background-color: #1a3a50;
  text-decoration:none;
  text-align: center;
  color: white;
}

h1 {
  position: relative;
  font-family: Pacifico, 'roboto slab', serif;
  font-size: 5vw;
}

这是头脑中的东西：

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="FCC calculator">
<meta name="keywords" content="FFC, calculator, Free, Codecamp">
<meta name="author" content="Santiago F. Rey">
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>

【问题讨论】：

标签： html twitter-bootstrap css grid bootstrap-4

【解决方案1】：

您正在使用 Bootstrap 4。您使用的类名用于 Bootstrap 3。因此您有两个选择：

在您的项目中包含 Bootstrap 3 并删除 bootstrap 4。

更改代码中的类名。检查 this link 以获取 Bootstrap 4 中的偏移量和 this one 以获取网格。

这是您的 Bootstrap 4 代码。还要根据您的屏幕尺寸注意col-md-x、col-lg-x。

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 offset-3">
      <h1>FFC Calculator</h1>
    </div>
  </div>
</div>

还要检查your CodePen link 我已修复它的位置。

【讨论】：

【解决方案2】：

笔正在使用 Bootstrap 4，并且 CSS 类名称已更改。 xs 中缀已在 4.x 中删除...

col-xs-offset-3 现在是 offset-3
col-xs-6 现在是 col-6

  <div class="container-fluid">
    <div class="row">
      <div class="offset-3 col-6">
      <h1>FFC Calculator</h1> 
      </div>
    </div>
  </div>

http://codepen.io/anon/pen/JNyqWX

【讨论】：

好答案，虽然我建议不要使用 BS 4，因为它仍处于 alpha 模式:)
Alpha doesn't stop people from using it 并准备发布测试版。