Bootstrap网格将不能使用xs列 [英] Bootstrap grid won't work using xs columns
问题描述
我开始了一个关于Codepen的新项目，并且正在使用bootstrap。自从我工作了一段时间以来，这已经有一段时间了。网格系统没有响应我，我找不到问题。我甚至复制了一个可以工作的旧版本，并且都没有工作。
以下是笔： 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计算器< / h1>
< / div>
< / div>
< / div>
< / body>
以下是CSS：
body {
position：relative;
margin-top：60px;
font-family：Arimo，'Roboto Slab'，serif;
背景颜色：＃1a3a50;
text-decoration：none;
text-align：center;
颜色：白色;
}
h1 {
position：relative;
font-family：Pacifico，'roboto slab'，serif;
font-size：5vw;
}
以下是头脑中的内容：
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< meta name =descriptioncontent =FCC calculator>
< meta name =keywordscontent =FFC，calculator，Free，Codecamp>
< meta name =authorcontent =Santiago F. Rey>
< link href ='https：//fonts.googleapis.com/css？family = Roboto + Slab：400,700'rel ='stylesheet'type ='text / css'>
笔使用Bootstrap 4，并且CSS类名字已经改变。 $ b
col-xs -offset-3 现在 offset-3
col-xs-6 现在是 col-6
< div class = 容器流体 >
< div class =row>
< div class =offset-3 col-6>
< h1> FFC计算器< / h1>
< / div>
< / div>
< / div>
http://codepen.io/anon/pen/JNyqWX
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-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
这篇关于Bootstrap网格将不能使用xs列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
