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'>
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-3col-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>
You are using Bootstrap 4. The class names that you are using are for Bootstrap 3. So you have two options:
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.
来源：https://stackoverflow.com/questions/43783360/bootstrap-grid-wont-work-using-xs-columns