我有一些填充的大问题.在我的问题描述有意义之前,在检查器窗口中有两页要查看 - 并查看移动视图设备部分:
1:这个民主正在按计划运作.
2:这个民主不起作用.
两页之间的区别在于我添加了一行,其中包含三张图片.有3张图片的行基本构建如下:
<div class="row wrapping">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-8 margin_bottom">
<!-- Picture 1 -->
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12 margin_bottom">
<!-- Picture 2 -->
</div>
</div>
<div class="row">
<div class="col-sm-12 margin_bottom">
<!-- Picture 3 -->
</div>
</div>
</div>
</div>
</div>
</div>
我看到它在内柱上设置了一个填充物col > row > col？如何删除填充？我使用下面的代码删除了行上的填充,并认为这也将计入所有列.
.row.wrapping {
margin-right: 0;
margin-left: 0;
}
.wrapping > [class^="col-"], .wrapping > [class^=" col-"] {
padding-right: 0;
padding-left: 0;
} …我只是在用户向下滚过标题时尝试制作页脚横幅,并在用户向上滚动到顶部时隐藏它.我对如何实现这个的想法是在页面的顶部组件中为scroll事件添加一个事件监听器.这是我目前的代码.但它不起作用:
componentDidMount() {
this.nv.addEventListener('scroll', this.handleScroll);
}
handleScroll(e) {
if(window.pageYOffset > 50 && window.pageYOffset < 900) {
console.log('scrolled');
this.setState({
showBanner: true,
});
} else {
this.setState({
showBanner: false,
});
}
}
顶级组件的渲染方法:
render() {
return (
<div ref={elem => this.nv = elem}>
<Header/>
<Body
userInfo={this.props.userInfo}
history={this.props.history}
/>
{
this.state.showBanner && <Banner/>
|| null
}
</div>
)
}
我没有看到任何日志,setState滚动时显然没有调用.
关于如何实现预期目标的任何建议？
*UPDATE*
更改componentDidMount为在窗口上添加事件监听器,现在它正在工作.
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
}
我已经在 angular 5 中使用 bootstrap-select 实现了选择框。我使用了最新版本的 Bootstrap select 来使其在 angular 5 中工作。但它抛出以下错误。
bootstrap-select.js:1904 未捕获的类型错误：无法设置未定义的属性“_menu”
<form>
<select class="selectpicker" data-live-search="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</form>
\n\ngatsby 公开开发成功并验证 gatsby-configs - 0.005 s\n 错误安装“sharp”模块出现问题模块\n \'\\?\\D:\\korero\\node_modules\\sharp\\build\ \Release\\sharp.node\' 是使用 NODE_MODULE_VERSION\n 针对不同的 Node.js 版本编译的\n 64。此版本的 Node.js 需要 NODE_MODULE_VERSION 79。请尝试重新编译或重新安装该模块（例如、使用
\nnpm\n rebuild或npm install)。\n - 确保安装时使用的 Node.js 版本与运行时使用的版本相匹配\n - 请参阅安装文档：https://sharp.pixelplumbing.com/en/stable/install/ \n - 在https://github.com/lovell/sharp/issues \xe2\xa0\x8b 加载插件中搜索此错误
我正在使用react-datepicker我们的日历控件。现在的问题是，如果用户输入的日期无效，例如“ djfdjfhjkhdf”，则在此控件中没有可以验证的日期。因此，我决定编写自己的验证函数，如果日期无效，则在模糊事件中调用该函数，然后清除用户输入的文本。我的代码是这样的：
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
focousOut(value) {
this.handleChange('');
}
handleChange(date) {
this.setState({ selectedValue: date });
this.setState({ startDate: date });
}
<DatePicker
selected={this.state.selectedValue}
value={this.state.startDate}
onChange={this.handleChange}
onBlur={event => this.focousOut(event.target.value)} />
validateDate是一个将返回的函数，true或者false，如果日期有效，则true返回false。我怎样才能达到这一要求，请您能帮助我吗？
我试图将我的index.js页面链接到文章模板，以使用slug和来显示来自中间件Drupal站点的数据createPages。我的数据正确显示在index.js页面上，createPages将文件路径更改为之后，似乎没有任何错误./src/templates/article.js。
我在编译时遇到此GraphQL错误：
error GraphQL Error编译站点的GraphQL查询时出错。错误：RelayParser：遇到1个错误：-未知参数'slug'。来源：文件
usersBrooksrelytHtdocsRepositoryGatsbyGraphqlGatsbySrcTemplatesArticleJs4119530598文件：GraphQL requestRun Code Online (Sandbox Code Playgroud)GraphQL request (3:12) 2: query($slug: String!) { 3: umdHub(slug: { eq: $slug }) { ^ 4: articles {
我的article.js代码：
import React from 'react'
import { graphql } from 'gatsby'
import { ListGroup, ListGroupItem } from 'reactstrap';
// eslint-disable-next-line
import Layout from "../components/layout"
import Header from "../components/header"
import Footer from "../components/footer"
export default ({ data }) => {
return (
<div>
<Header />
<div className="container spaces …这是使用TweenMax库创建简单的加载点动画的代码。
TweenMax.staggerTo(".dots", 2, {
x: 220,
backgroundColor: 'white',
repeat: -1,
ease: SlowMo.ease.config(0.5, 0.4, false)
}, 0.4);
TweenMax.staggerFrom(".dots", 2, {
opacity: 0,
scale: 0.7,
repeat: -1,
ease: SlowMo.ease.config(0.5, 0.4, true)
}, 0.4);html {
width: 260px;
height: 32px;
overflow: hidden;
}
body {
background-color: transparent;
text-align: center;
padding: 50px;
}
.container {
background-color: transparent;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.dots {
position: absolute;
width: 1em;
height: 1em;
border-radius: 50%;
background-color: #d0c9d8;
opacity: 1;
left: -120px;
} …在我的应用程序中，我使用 React Bootstrap 和 Formik。我希望引导程序在我按下提交按钮后显示该字段无效（例如不是电子邮件，但应该是）。然后当我开始在字段中输入新值时，它应该会消失。在我使用的教程中，我只找到了在用户输入值的同时显示该字段无效的方法？
怎么做？如何设置isInvalid仅在使用 Formik 提交后才显示错误？
这是我当前的代码
import * as yup from "yup";
import React from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import {Formik} from "formik";
import {loginActions} from "../_actions/loginActions";
import {connect} from "react-redux";
import {loginService} from "../_services";
const schema = yup.object().shape({
username: yup.string().email("Login musi by? w formie e-mail").required("Wype?nij pole login"),
password: yup.string().required("Wype?nij pole has?o")
});
class LoginForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
const {username, password} …目前我正在使用react.js而我正试图让两个div并排.目前我正在尝试
<div id="sidebar" style = "display:inline-block;" >
<script src="build/sidebar.js"></script>
</div>
<div id="map-canvas" style="display: inline-block; width: 20%; height: 50%; "></div>
使用sidebar.js作为存储反应的位置.不幸的是,这不起作用,因为它只是将地图画布移动到侧面而侧边栏不在其左侧; 它在顶部.我已经尝试了许多各种组合w/float,但它们似乎都不起作用
另一种选择是编辑我目前拥有的sidebar.js代码
return <div>
<input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Type here" />
<ul>
{ libraries.map(function(l){
return <li>{l.name} </li>
}) }
</ul>
</div>;
我尝试做的事情return <div style ="display: inline-block;">
然而,在这种情况下,生成的html根本不显示.我很困惑我应该尝试但反应似乎它不想与其他div元素玩得很好.
我怎样才能做到这一点？
// 样式.scss
$primary-color: #dc4545;
div{
background : $primary-color;
}
尝试这样做：
div{
background : var(--primary-color)
}
这有可能吗？