那些遇到过的问题

小编kiz*_*oso的帖子

CSS background-size:移动Safari的封面替换

嗨,我的页面上有几个div,它们有背景图像,我想扩展以覆盖整个div,而div又可以扩展以填充视口的宽度.

显然,background-size: cover在iOS设备上出现意外行为.我已经看到了一些如何修复它的例子,但我不能让它们在我的情况下工作.理想情况下,我不想<img>在HTML中添加额外的标签,但如果这是唯一的方法,那么我会.

这是我的代码:

.section {
  margin: 0 auto;
  position: relative;
  padding: 0 0 320px 0;
  width: 100%;
}

#section1 {
  background: url(...) 50% 0 no-repeat fixed;
  background-size: cover;
}

#section2 {
  background: url(...) 50% 0 no-repeat fixed;
  background-size: cover;
}

#section3 {
  background: url(...) 50% 0 no-repeat fixed;
  background-size: cover;
}
Run Code Online (Sandbox Code Playgroud) 
<body>
  <div id="section1" class="section">
    ...
  </div>
  <div id="section2" class="section">
    ...
  </div>
  <div id="section3" class="section">
    ...
  </div>
</body>
Run Code Online (Sandbox Code Playgroud)

问题是,如何考虑浏览器的可变宽度和div中内容的可变高度,如何让背景图像完全覆盖div部分？

html css mobile-safari

Jos*_*osh
2018 03-08
52
推荐指数
4
解决办法
16万
查看次数

如何使用CDN在bootstrap 4中创建新的断点？

我使用BootstrapCDN.其他样式用sass编写并由gulp构建.我需要创建自己的breakpionts.如果我使用CDN,是否可以制作它们？我无法弄清楚该怎么做.我必须创建这些断点:

--breakpoint-xxxs: 0;
--breakpoint-xxs: 320px;
--breakpoint-xs: 568px;
--breakpoint-sm: 667px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1440px;
--breakpoint-xxxl: 1600px;
Run Code Online (Sandbox Code Playgroud)

我想得到这样的东西:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
	<div class="row">
		<div class="col col-xxxs-1 col-xxs-2 col-xs-3 col-sm-4 col-md-5 col-lg-6 col-xl-7 col-xxl-8 col-xxxl-9">
			<div style="height:100vh;background:purple">text</div>
		</div><!--col-->
	</div><!--.row-->
</div><!--.container-->
Run Code Online (Sandbox Code Playgroud)

我找到了手册,我正在尝试这个:

$grid-breakpoints: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
)  !default;

$container-max-widths: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px, …
Run Code Online (Sandbox Code Playgroud)

frontend sass media-queries twitter-bootstrap bootstrap-4

kiz*_*oso
2018 02-22
14
推荐指数
2
解决办法
8899
查看次数

Bootstrap 4 嵌套折叠“数据父级”不起作用

我想使用折叠数据父选项。我需要传统的手风琴行为：当显示可折叠项目时，应关闭指定父项下的所有可折叠元素。但它不起作用。我不知道这是因为我的嵌套折叠还是我做错了什么。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="content-nav">
  <a data-parent="#content-articles" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="content-nav__book_third" href="#content-nav__book_third" class="content-nav__book content-nav__book_third">3</a>
  <a data-parent="#content-articles" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="content-nav__book_second" href="#content-nav__book_second" class="content-nav__book content-nav__book_second">2</a>
  <a data-parent="#content-articles" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="content-nav__book_first" href="#content-nav__book_first" class="content-nav__book content-nav__book_first">1</a>
</div>
<!--.content-nav-->
<div id="content-articles">
  <div id="content-nav__book_third" class="content-article collapse">
    <div id="content-article__info_third-1" class="content-article__info collapse">
      Book 3 article 1
    </div>
    <!--.content-article__info-->
    <div id="content-article__info_third-2" class="content-article__info collapse">
      Book 3 article 2
    </div>
    <!--.content-article__info-->
    <div id="content-article__info_third-3" class="content-article__info …
Run Code Online (Sandbox Code Playgroud)

html javascript collapse twitter-bootstrap bootstrap-4

kiz*_*oso
lucky-day
7
推荐指数
1
解决办法
5419
查看次数

是否可以进行文本溢出:仅使用css选择省略号？

是否有可能做text-overflow: ellipsis;的select？在div它很简单.当字符串太长时有点,我需要相同的select.我知道,这是可能的js,但我想css做出"轻松"的决定:

.select {
  box-sizing: border-box;
  display: block;
  width: 200px;
  height: 34.5px;
  padding: 5px 22px 3px 11px;
  font: 400 16px/24px sans-serif;
  color: #464a4c;
  vertical-align: middle;
  background: #fff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiID8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyIiBoZWlnaHQ9IjciPgoJPGRlZnM+CgkJPGNsaXBQYXRoIGlkPSJjbGlwXzAiPgoJCQk8cmVjdCB4PSItNDE1IiB5PSItNjYyIiB3aWR0aD0iMTQzNyIgaGVpZ2h0PSIyMjE2IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KCQk8L2NsaXBQYXRoPgoJPC9kZWZzPgoJPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXBfMCkiPgoJCTxwYXRoIGZpbGw9InJnYig2NSw2NSw2NSkiIHN0cm9rZT0ibm9uZSIgZD0iTTAuNjUzNDQzIDQuNzY4MzdlLTA3TDExLjM0NjEgLTQuNzY4MzdlLTA3QzExLjk0MDIgLTQuNzY4MzdlLTA3IDEyLjE2ODIgMC41ODQ0ODggMTEuODY4MiAwLjkwNzY0OUw2LjU1MDMzIDYuNzE0MDRDNi4yNDczMSA3LjAzNjAzIDUuNzUzNzcgNy4xMTc3IDUuNDUwNzYgNi43OTQ1NEwwLjEzMjkxIDAuODY2ODE3Qy0wLjE3MDEwOSAwLjU0NDgyMyAwLjA2MjQwNTYgNC43NjgzN2UtMDcgMC42NTM0NDMgNC43NjgzN2UtMDciLz4KCTwvZz4KPC9zdmc+Cg==) no-repeat right 6px top 13px;
  border: 1px solid #D6D6D6;
  border-radius: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}
Run Code Online (Sandbox Code Playgroud) 
<select class="select">
  <option selected>select Mississippi Mississippi Mississippi Mississippi Mississippi</option>
  <option value="1">1 Mississippi Mississippi Mississippi Mississippi Mississippi</option>
  <option value="2">2 …
Run Code Online (Sandbox Code Playgroud)

html css html5 frontend css3

kiz*_*oso
lucky-day
6
推荐指数
1
解决办法
3575
查看次数

如何使 sanity io 数组选择为多选？

我有很多标签，我需要为每个文档选择很多标签。每次都要一张一张地点击，很不舒服。我还看到了选定的元素。我怎样才能将它重新制作成像多选这样的字段？它甚至可能是本地的。或者如何一次选择所有标签？

我正在使用数组：

{
  title: 'Language',
  name: 'language',
  type: 'array',
  options: {
    layout: 'grid'
  },
  of: [{
    type: 'reference',
    title: 'Lang',
    to: {
      type: 'settingLanguages'
    }
  }],
},
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

content-management-system sanity headless-cms

kiz*_*oso
2019 04-23
6
推荐指数
2
解决办法
8394
查看次数

如何使用 sanity.io 在字段中创建默认值？

是否可以使用默认值添加到健全性字段？我怎样才能延长它？我想用默认变量创建一些字段。例如我有这个代码：

export default {
  name: 'name',
  title: 'name',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'title',
      type: 'string',
      validation: Rule => Rule.required(),
    },
    {
      name: 'key',
      title: 'key',
      type: 'slug',
      options: {
        source: 'title',
        maxLength: 96
      }
    },
    {
      name: 'geo',
      title: 'geo',
      type: 'geopoint',
      //default: {"lat": 1,"lng": 2}
    },
    {
      name: 'tel',
      title: 'tel',
      type: 'string',
      //default: '122334554565'
    },
  ],
  preview: {
    select: {
      title: 'title'
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

javascript sanity

kiz*_*oso
2019 02-20
5
推荐指数
1
解决办法
1642
查看次数

如何重复 CSS 伪元素？

我有代码：

div {
  position: relative;
  background: blueviolet;
  height:100px;
}

div:before {
  content: 'sale';
  color: white;
}
Run Code Online (Sandbox Code Playgroud) 
<div></div>
Run Code Online (Sandbox Code Playgroud)

我想用伪元素填充 div：

div {
  position: relative;
  background: blueviolet;
  height: 100px;
}

div:before {
  content: 'sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale …
Run Code Online (Sandbox Code Playgroud)

html css pseudo-element

kiz*_*oso
2017 08-22
4
推荐指数
1
解决办法
7112
查看次数

在SASS中,我可以将属性定义为mixin中的参数吗？

我想写这样的东西:

$widthXl: 1000px
$widthSm: 500px
@mixin med ($prop, $xl, $sm)
  @media (max-width: $widthXl)
    &
      $prop: $xl
  @media (max-width: $widthSm)
    &
      $prop: $sm
a
  @include med(width, 600px, 300px)
b
  @include med(color, #000, #888)
Run Code Online (Sandbox Code Playgroud)

得到这个:

@media (max-width: 1000px) {
  a {width: 600px}
  b {color: #000}
}
@media (max-width: 500px) {
  a {width: 300px}
  b {color: #888}
}
Run Code Online (Sandbox Code Playgroud)

但是我的代码没有编译它.可能吗？

知道某人是否面临同样的问题会很有趣.

如果我删除属性,代码工作正常.但我想创建复杂的解决方案.

css frontend sass css-preprocessor

kiz*_*oso
2017 12-08
3
推荐指数
1
解决办法
42
查看次数

标签 统计

css ×4

html ×4

frontend ×3

bootstrap-4 ×2

javascript ×2

sanity ×2

sass ×2

twitter-bootstrap ×2

collapse ×1

content-management-system ×1

css-preprocessor ×1

css3 ×1

headless-cms ×1

html5 ×1

media-queries ×1

mobile-safari ×1

pseudo-element ×1