引导网格无法使用 xs 列

2023-08-02前端开发问题
0

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

问题描述

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

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

这是笔: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'>

推荐答案

笔使用的是Bootstrap 4,CSS类名发生了变化.xs 中缀已在 4.x 中移除...

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 现在是 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

这篇关于引导网格无法使用 xs 列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

layui 实现实时刷新一个外部的div
主页面上显示了一个合计,在删除和增加的时候需要更改这个总套数的值: //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后,...
2024-11-14 前端开发问题
156

layui 单选框、复选框、下拉菜单不显示问题如何解决?
1. 如果是ajax嵌套了 页面, 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
2024-11-09 前端开发问题
313

layui要如何改变时间日历布局大小?
问题描述 我想改变layui时间日历布局大小,这个要怎么操作呢? 解决办法 可以用css样式对时间日历进行重新布局,具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271

jQuery怎么动态向页面添加代码?
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。 语法: $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href...
2024-10-18 前端开发问题
125

“数组中的每个孩子都应该有一个唯一的 key prop"仅在第一次呈现页面时
quot;Each child in an array should have a unique key propquot; only on first time render of page(“数组中的每个孩子都应该有一个唯一的 key prop仅在第一次呈现页面时)...
2024-04-20 前端开发问题
5

如何制作 TextGeometry 多线?如何将它放在一个正方形内,以便它像 html 文本一样包裹在 div 内?
How do I make a TextGeometry multiline? How do I put it inside a square so it wraps like html text does inside a div?(如何制作 TextGeometry 多线?如何将它放在一个正方形内,以便它像 html 文本一样包裹在 div 内?) - IT屋-程序员软件开发技术分享社...
2024-04-20 前端开发问题
6