Question

我在Codepen上开始了一个新项目，并且我使用了bootstrap ..自从我使用CSS以来已经有一段时间了。网格系统对我没有响应，我无法找到问题。我甚至复制了一个工作较旧的proyect，并没有工作..

以下是笔：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'>

Answer 1

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

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

Answer 2

您正在使用Bootstrap 4.您使用的类名是Bootstrap 3.所以您有两个选择：

在项目中包含Bootstrap 3并删除bootstrap 4.



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

这是您的Bootstrap 4的代码。还要根据您的情景大小来处理onReceive()，col-md-x。

col-lg-x

同时检查我已修复的your CodePen link。

Bootstrap网格使用xs列

2 个答案: