小编Mar*_*ark的帖子

在HTML或CSS中是否存在某种限制跨度显示的字符的方法？我使用显示这些信息框的转发器,我想将字符限制为前20个字符,如果输入有更多,那么只是连接？该框如图所示:

我的代码是:

<span class="claimedRight" maxlength="20">{{ item.provider }}</span>

由于create-react-app隐藏Webpack配置而不必使用eject,如果我想使用像reactstrap或react-bootstrap之类的东西,我应该弹出还是我会没有弹出而没有弹出？

只是想eject知道他们需要什么时候才能使用他们需要的东西？在我的应用程序的这一点,我只是原型,但它将进一步与更多的依赖和诸如此类的东西.

所以我已经使用create-react-app. 默认情况下，它npm用于构建、本地运行等...

我想要做的是转向使用 Webpack，但不破坏现有设置并进行了一些谷歌搜索，但没有任何开始和逐步进行，以便我可以更好地了解它正在做什么以及它要去哪里。也希望将 usingwebpack-dev-server与此结合使用。

也就是说，我希望你们有一些建议，也许还可以指出一些很好的教程来推动这一进程？

非常感谢。

所以我有3个盒子需要具有特定的高度和宽度,并将它们设置在bootstrap中作为子元素.在全视图中看起来很好:

但是,当窗口调整大小时,框会向左移动而不是浮动在背景图形的中间.此外,标题文本(黄色)丢失其上填充:

认为"响应性"正在接管,但无法确定它,我希望你们中的一些人可以提供帮助.

我的HTML是这些:

<div class="container">
    <div class="claimHead col-md-12">
        <div class="submitHeader" style="margin-top: 60px; margin-bottom: 60px; margin-left: 30px;">
            <h1 style="font-size: 36px;">Claim Submission Tool</h1>
            <p style="font-size: 18px;">Filing claims has never been easier, it's a simple as 1, 2, 3</p>
        </div>
        <div id="stepsContainer">
            <div class="col-md-4 stepsBox">
                <div class="claimSteps" id="stepOne">
                    <p class="claimStepNumber">1</p>
                    <p class="claimStepTitle">step one</p>
                    <p class="claimStepText">Get started by entering your claim information in the fields below.</p>
                </div>
            </div>
            <div class="col-md-4 stepsBox">
                <div class="claimSteps" id="stepTwo">
                    <p class="claimStepNumber">2</p>
                    <p class="claimStepTitle">step two</p>
                    <p class="claimStepText">Next drag & …

有没有一种简单的方法,甚至可以使用flexbox在一个div内均匀分配3个按钮？我是flexbox的新手,并且仍然试图计算何时以及何时不使用它,直到我更习惯它.无论哪种方式,我的HTML (实际上,这是在React中的JSX)是:

<div className="container">
    <div>
        <p>Ea commodo tempor magna incididunt fugiat reprehenderit laboris excepteur velit labore. Commodo dolore cillum commodo eu cillum est minim ad. Laboris proident sint anim reprehenderit fugiat pariatur nulla reprehenderit veniam duis adipisicing cupidatat laboris consequat. Reprehenderit laboris nostrud nulla cillum qui in laborum exercitation est do. Quis esse consectetur ex nisi. Nulla veniam nisi cillum cillum in in ipsum sit et labore elit cillum occaecat. Eu quis excepteur quis exercitation ut pariatur laboris in …

所以我的根目录结构包含

app/
bower_components/
node_modules
..bowercc
gulpfile.js
....etc.....

在app下是其他文件夹,如"

/css/
/js/
/assets/
index.html
/view/

所以我的问题是这是一个非常简单的gulp文件.我的凉亭组件不会加载,因此Angular永远不会附加.我的.bowercc看起来像:

{
  "directory": "bower_components"
}

我的gulpfile.js看起来像:

// gulp var gulp = require('gulp');

// plugins var connect = require('gulp-connect');

gulp.task('connect', function () {
    connect.server({
        root: [__dirname],
        port: 8888
    });
});

我正在使用gulp connect插件并根据我的理解,因为我的bower_components位于根而不是'/ app'文件夹下,我可以简单地使用[dirname],但这会破坏事情.如果我将root选项留空,则不会加载任何依赖项,我会获得404的bootstrap,font-awesome等...我依赖于bower.

当然有些人了解如何解决这个问题？我不想求助于使用Require,因为我只想让它按照我的结构目前的方式工作.我能在这做什么？

非常感谢.

所以我有一个主要的样式更改,而当我的所有视图最初设置时,我使用了Bootstrap并依赖容器类来调整1200px,992px和768px断点处的媒体查询.所有我的表单输入和其他内容工作他们的填充和所有关闭容器的填充,边距等...现在,要求宽度为100%,但所有内容留在它所在的背景颜色样式填充显示的宽度.

我试图想一想如何添加另一个容器类来使其在所有视图上工作.有什么建议可以将内容的限制保持在1200px等等(对于媒体查询等),但是让其他区域扩展到100%？

这是现在的图像捕捉.它只是棕褐色和深灰色区域,topo图像将扩展100%,而其他所有区域都在容器类的约束范围内.

我的代码结构如此,你可以看到我的delima与overtra riding bootstraps容器类的位置:

<div class="container">
    <form role="form">
        <div class="naviaHead col-md-12">
            <div class="naviaHeader">
                <div class="inner">
                    <div class="col-md-6 loginArea">
                        <h1 class="col-md-8">Login</h1>
                        <div class="form-group">
                            <div class="form-group col-md-8 naviaInp">
                                <input type="text" name="userName" class="form-control" placeholder="username" data-ng-model="loginData.userName"autofocus>
                            </div>
                            <div class="form-group col-md-8 naviaInp">
                                <input type="password" name="passWord" class="form-control" placeholder="password" data-ng-model="loginData.password">
                            </div>
                            <div style="clear: both;">
                                <input type="button" class="naviaBtn naviaBlue" data-ng-click="login()" value="login">
                                <div data-ng-hide="message == ''" class="alert alert-danger">
                                    {{message}}
                                </div>
                            </div>
                            <div class="loginForget">
                                <span><a class="naviaLink" href="#/logreg/forgotUser">forgot username</a> or <a class="naviaLink" href="#/logreg/forgotPass">forgot password</a></span>
                            </div>
                            <div class="sowLogin">
                                <img class="col-md-3" …

我正在尝试找到一些文档,以便能够将计数的数字附加到ng-repeat返回的每个项目中.对于Angular来说,这不是一个开箱即用的东西吗？不太像Id,但更像是,如果返回4个项目,每个项目JSON对象可以在返回的数据前面添加一个数字.我的代码看起来像:

<div  class="swipeBoxes" ng-repeat="swipe in swipes">
    <a href="#">
        <div class="swipeBox">
            <span class="swipeNum"></span>
            <p><span>swipe date:</span><span>{{ swipe.date | date: 'MM/dd/yyyy'}}</span></p>
            <p><span>provider:</span><span>{{ swipe.merchant }}</span></p>
            <p><span>amount:</span><span>{{ swipe.amount | currency }}</span></p>
        </div>
    </a>
</div>

我正在使用 react.js 构建一个表单，但遇到了一个我似乎无法解决的问题。prop-types我在表单中为我的道具使用 npm 模块并尝试inputType为单个输入设置一个。我不断收到以下错误：

我的代码是：

import React from 'react';
import PropTypes from 'prop-types';

const SingleInput = (props) => (
    <div className="form-group">
        <label className="form-label">{props.title}</label>
        <input
            className="form-input"
            name={props.name}
            type={props.inputType}
            value={props.content}
            onChange={props.controlFunc}
            placeholder={props.placeholder} />
    </div>
);



SingleInput.propTypes = {
    inputType: React.PropTypes.oneOfType(['text', 'number']).isRequired,
    title: React.PropTypes.string.isRequired,
    name: React.PropTypes.string.isRequired,
    controlFunc: React.PropTypes.func.isRequired,
    content: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.number,
    ]).isRequired,
    placeholder: React.PropTypes.string,
};

export default SingleInput;

我在使用oneOf和 then之间切换oneOfType，但无论哪种方式都得到相同的结果。还有什么我应该做的吗？

非常感谢。