Bootstrap grid won't work using xs columns

2019-01-28 23:02发布

站内问答 / Html5
524 2 6

I started a new project on Codepen and I'm using bootstrap.. It's been a while since I worked CSS. The grid sistem is not responding for me, I can't find the problem. I even copied a working older proyect and didn't work neither..

Here is the pen: http://codepen.io/Chantun/pen/NjgpaY

Here's the 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>

Here's the 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;
}

And here's the stuff in head:

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

2条回答
ゆ 、 Hurt°
2楼-- · 2019-01-28 23:35

You are using Bootstrap 4. The class names that you are using are for Bootstrap 3. So you have two options:

  • Include Bootstrap 3 in your project and remove bootstrap 4.

  • Change the class names in your code. Check this link for offsets in Bootstrap 4 and this one for grid.

This is your code for Bootstrap 4. Also take care of col-md-x, col-lg-x based on your sceen sizes. 

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

Also check your CodePen link where I have fixed it.

查看更多
0人赞 添加讨论(0) 举报
叼着烟拽天下
3楼-- · 2019-01-28 23:42

The pen is using Bootstrap 4, and the CSS class names have changed. The xs infix has been removed in 4.x...

col-xs-offset-3 is now offset-3
col-xs-6 is now 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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)