网格无法使用

网格无法使用

关注
发信
关注(28)粉丝(399)

Bootstrap 网格无法使用 xs 列

本文介绍了Bootstrap 网格无法使用 xs 列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

这是html:

这是CSS:

body {位置:相对；边距顶部:60px；字体系列:Arimo，'Roboto Slab'，衬线；背景颜色:#1a3a50；文字装饰:无；文本对齐:居中；白颜色;}h1{位置:相对；字体系列:Pacifico，'roboto 板'，衬线；字体大小:5vw；}

这是头脑中的东西:

<meta name="description" content="FCC 计算器"><meta name="keywords" content="FFC，计算器，免费，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'>
解决方案

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

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

 
<div class="row"><div class="offset-3 col-6"><h1>FFC 计算器</h1>

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 列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-31 04:21
Powered by LMLPHP ©2024 网格无法使用 0.051789