小编Jus*_*ney的帖子

我一直在开发一个bootstrap网站,我发现了一个非常重要的缺陷,它将平板电脑尺寸与手机尺寸相同,col-xs-x(适用于768px及以下)适用于iphone和ipad.

http://www.think.darkstarmedia.net/

根据我的设计,我使用2列用于桌面和平板电脑大小,一次在手机大小我希望它是1列,但bootstrap无法做到这一点

我知道我可以创建完全相同内容的2个副本并使用媒体查询(例如display:none,display:block)并将它们换成480像素以下,但这似乎与使用像bootstrap这样的东西相悖..

无论如何使用bootstrap的列来完成我想要的东西..

例如
col-sm-3用于桌面(4列)col-xs-6用于平板电脑(2列)col - ??? - 12用于手机(1列)

或者请澄清我是否错过了显而易见的事实

我一直在尝试预加载字体，无论我如何编写，Chrome 或 Firefox 都会抛出某种控制台错误。

情况1

<link rel="preload" href="/fonts/open-sans-v26-latin-regular.woff2" as="font" type="font/woff2" crossorigin>\n  <link rel="preload" href="/fonts/RobotoCondensed-Regular.ttf" as="font" type="font/truetype" crossorigin>\n

火狐浏览器：

Error 1\nPreload of /fonts/RobotoCondensed-Regular.ttf was ignored due to unknown \xe2\x80\x9cas\xe2\x80\x9d or \xe2\x80\x9ctype\xe2\x80\x9d values, or non-matching \xe2\x80\x9cmedia\xe2\x80\x9d attribute.\n\nError 2\nThe resource at \xe2\x80\x9c/fonts/open-sans-v26-latin-regular.woff2\xe2\x80\x9d preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.\n\nThe resource at \xe2\x80\x9c/fonts/RobotoCondensed-Regular.ttf\xe2\x80\x9d preloaded with link preload was not used within a few seconds. Make …

我的 Next.js 网站使用滑块 https://github.com/nerdyman/react-compare-slider

它运行良好，但不适用于 Safari、桌面版或 iPhone。这是我的网站 https://wordpress-website-headless-v2-afjayn5e2.vercel.app/

靠近页面底部我正在使用比较滑块，这导致了错误。

我用谷歌搜索了一下，看起来很多滑块在 Safari 上都有这个问题，解决方案是添加一个polyfill（https://www.npmjs.com/package/resize-observer-polyfill），我就是这样做的（我认为）但它仍然不起作用..这是我的整页代码。

总而言之，它适用于 Firefox 和 Chrome，但不适用于 Safari

import ResizeObserver from 'resize-observer-polyfill';
import Head from 'next/head'
import Link from 'next/link'
import Image from 'next/image'
import ContainerFull from '../components/container-full'
import HomeStories from '../components/home-stories'
import MyCarousel from '../components/carousel'
import HeroPost from '../components/hero-post'
import Intro from '../components/intro'
import Layout from '../components/layout'
import { getHomePage, getHomeSlides, getAllPostsForLanding } from '../lib/api'
import { CMS_NAME } from '../lib/constants'
import Header from '../components/header'
import Col from …

我很难描述我正在寻找的东西（在谷歌上搜索）

我有动态徽标内容，可能是 3 个徽标，也可能是 7 个徽标。我的模板需要容纳所有徽标，它们都需要以等间距显示在一行中。

例如，如果我提前知道我有 3 件物品，我的代码将是这样

grid-template-columns: 1fr 1fr 1fr; 

如果我事先知道我有 7 件物品，我的代码将是这样

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 

我不知道我曾经拥有多少物品。那么我该如何编码以适应动态数量的列呢？

我正在测试我的树枝模板中的数组中是否存在一个值

<input type="hidden" name="s" value="{{ search_value }}">
  <label>
    <input type="checkbox"  
           name="cat[]" 
           value="3" 
           onchange="this.form.submit()"
           {% if 3 in cat  ? ' checked' : '' %} >
    <span>cbd</span>
  </label>
  {{ cat }}

我{{ cat }}在页面上的转储数组，我确定我的问题是一个愚蠢的语法错误。我得到的错误是

致命错误：未捕获的异常：模板意外结束。在....

如果我以这种方式包装，我会得到一个不同的错误

 {% (if 3 in cat)  ? ' checked' : '' %} >
Fatal error: Uncaught Exception: A block must start with a tag name.