小编JCr*_*ine的帖子

我正在尝试构建一个定价表,其中每列包含一张卡片.我希望所有卡片都伸展到其父(.col)元素的高度.

注意:我正在使用Bootstrap 4,并尝试使用现有的网格系统(为了保持一致性)和这个特定的标记来实现这一点.我无法让卡片增长到父容器的高度.这是否可以使用当前标记？

基本标记是这样的:

<div class="row">
    <div class="col">
        <div class="card">
          blah
          blah
          blah
        </div>
        <div class="card">
          blah
        </div>
        <div class="card">
          blah
        </div>
    </div>
</div>

这是我的笔:https://codepen.io/anon/pen/oZXWJB

我一直在挖掘很多关于黄金比例和模块化比例的文章,试图了解排版在技术层面的运作方式.我不能说我完全理解它,但现在我对Zurb的基金会4更加困惑.

在他们的文档中,他们已经声明他们不再依赖/使用模块化比例来排版.所以我很想知道他们是如何想出这些数字的,尤其是他们的标题元素.

例如:这是他们的标题在他们的_type.SCSS中的写法

$h1-font-size:                         emCalc(44px) !default;
$h2-font-size:                         emCalc(37px) !default;
$h3-font-size:                         emCalc(27px) !default;
$h4-font-size:                         emCalc(23px) !default;
$h5-font-size:                         emCalc(18px) !default;
$h6-font-size:                         1em !default;

// Also...

$paragraph-font-size:                  1em !default;

我的问题;

1. 他们是如何得出这些价值的,以及他们如何在数学上相互联系？Docs似乎没有具体说明它是如何工作的.

2. 我想将段落字体大小(基线？)更改为18px(1.125em)而不是16px(1em) - 我将如何计算标题元素,以便它们是合适的/数学上合理的距离？

3. 我是否正确地假设更改标题大小从选择正文字体大小开始,然后从那里计算？

我非常感谢有关这个主题的任何建议,我不是最具数学思想的人,所以......要温柔.

谢谢!

这是一个棘手的问题需要解释,我会尽力做到尽可能彻底:

我的设置 - 使用Jekyllrb生成器

我按照Zurb的说明,采用了Jekyllrb Yeoman发电机,并以最基本的方式(仅使用Sass文件)将Zurb的Foundation 5集成到其中.

我在grunt.js中的Sass路径如下:

loadPath: 'app/_bower_components/foundation/scss'

在我的/ _scss我有:

app.scss
_settings.scss

在app.scss中 - 我包含了许多基础组件(例如手风琴,类型,标签等).每个人都带来一套全球风格.这些样式包含在以下内容中:

@include exports("global") { ... }

根据这个链接:

"当包含在SASS模块中时,如果在其他地方调用@import,sass-import-once将阻止样式被复制.这很酷,因为它允许每个SASS文件声明它自己的依赖项.这促进了封装并允许模块独立如果需要的话."

我的Grunt.js

// Generated on 2014-09-28 using generator-jekyllrb 1.2.1
'use strict';

// Directory reference:
//   css: css
//   sass: _scss
//   javascript: scripts
//   images: img
//   fonts: fonts

module.exports = function (grunt) {
  // Show elapsed time after tasks run
  require('time-grunt')(grunt);
  // Load all Grunt tasks
  require('load-grunt-tasks')(grunt);

  grunt.initConfig({
    // Configurable …

我正在 Jekyll 中构建页面（而不是帖子）。一页定义了前台的 2 个类别，如下所示：

categories: [document, new]

然后在布局中，我试图输出类别对象/数组，但没有输出任何内容：

<h1>Array: {{ site.categories }}</h1>

为什么这不会按预期输出数组？

我正在构建一个Javascript灯箱,我试图在图像加载后调整大小.我正在使用下面的代码,它工作正常 - 一旦加载它输出正确的宽度.

我的问题:

当我刷新时,它会立即从缓存加载图像,它似乎绕过了负载.我的宽度瞬间为零.为什么会这样？

我的代码:

var oImage = new Image();

oImage.src = 'http://mydomain.com/image.png';

container.html(oImage);

oImage.onload = function(){

    alert(this.width);
}

**更新**

@Alex:这是我用你的插件试过的代码,我想我可能做错了.我渴望得到这个,因为你的插件看起来很不错.

container.waitForImages(function() {

    var cWidth = $(this).width();

    alert("width: "+cWidth); // returns 0 - works first time but not cached

});

// Adding the image to the container for preload

container.html('<img src="mygraphic.png" />');

我对 Redux/RTK 还很陌生，所以我仍在弄清楚。

情况：

favIds我有一个locationsSlice，它存储状态中的ids ( ) 数组。

我还有一个 ForecastSlice，它有一个对象数组 ( forecastObjects)。

我的问题：

我想编写一个全局选择器，它可以根据locationsSlice 中的id 返回过滤的预测对象。为此，我需要引用另一个切片的 state。做这个的最好方式是什么？

我可以为这样的逻辑编写一个钩子，但是有没有办法在切片内执行此操作？这是不好的做法吗？

有人知道吗？还有什么语法高亮显示器正在使用？整理等？

我试图把我的脑袋包裹在mod重写之上,但似乎无法弄清楚这一点.

有没有办法可以做到以下几点？

用户类型: http://wildcard.mydomain.com

默默地写道:

http://mydomain.com/index.php?username=wildcard

当我进行大量测试时，每次保存文件都会污染浏览器的控制台。可以关掉吗？

例如。

[Fast Refresh] done in 93ms
hot-dev-client.js?1600:159 [Fast Refresh] rebuilding
hot-dev-client.js?1600:135 [Fast Refresh] done in 37ms
hot-dev-client.js?1600:159 [Fast Refresh] rebuilding
HELLO WORLD
hot-dev-client.js?1600:135 [Fast Refresh] done in 48ms
hot-dev-client.js?1600:159 [Fast Refresh] rebuilding
hot-dev-client.js?1600:135 [Fast Refresh] done in 76ms

我正试图找到一个错误的底部我正在使用jQuery地图片段.这可以在jQuery 2下运行,但升级到3它会中断,我不知道为什么.卡住 :/

var menuItems = $("#topNav a");

var scrollItems = menuItems.map(function() {
  var item = $($(this).attr("href")); // <= this is the culprit ??
  if (item.length) {
    return item;
  }
});

// Expecting an object containing  the page sections
console.log(scrollItems);

<!-- THIS FAILS (jQuery 3) -->
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

<!-- THIS WORKS HOWEVER (JQuery 2) -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->

<!-- My navigation -->
<nav id="topNav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<-- My Page sections …