标签: react-bootstrap

我有以下css打破我的布局:

@media (min-width: 768px)
.row {
    display: flex;
}

我可以禁用显示弹性规则吗？谁能解释为什么会这样？

更新:

目前使用boostrap-sass,"bootstrap-sass":"~3.3.5"无法找到我的sass文件中的行,可能没什么帮助,但它出现在我编译的css中:

strong {
  font-weight: 600; }

.wrapper {
 padding: 50px 20px; }

 // row class here

**@media (min-width: 768px) {
  .row {
  display: flex; } }**

@media (min-width: 768px) {
  .column {
width: 50%; }
.column:first-child {
margin-right: 20px; } }

.modal__button {
 margin-right: 5px; }

@media (max-width: 500px) {
 .modal-dialog {
width: 100%;
margin: 10px auto; } }

.week-navigation {
  float: right; }

 .week-navigation__next-button {
  float: …

我一直在研究boostrap反应3小时.我试图找到我的问题的问题和答案.Bootstrap React的bsStyle根本不起作用,所以我想知道为什么？我看过很多例子,他们只是像我所做的那样导入.

import {Button} from 'react-bootstrap';

但我仍然得到一个简单的按钮 ,我的组件没有任何样式

export class bsButton extends React.Component{
render () {
        return (
            <div>
                <Button bsStyle="primary">primary button</Button>
            </div>
        );
    }
} 

我的导入或组件代码有什么问题？感谢您的帮助:D

我想将网站从PSD原型转换为HTML/CSS/Bootstrap,然后转向JavaScript开发并使用React.js和一些JavaScript编码.

是否可以在不使用React-Bootstrap的情况下将纯Bootstrap与React.js一起使用？

还有可能HTML/CSS Freelancer只能将React-Bootstrap作为模型,然后找到一个JavaScript开发人员来完成像React.js和JS开发这样的高级工作吗？

我想使用电子和混合应用程序使用相同的代码库开发桌面应用程序.

以下是我的代码:

var WholeTab=React.createClass                                                 
({                                                                             
  getInitialState:function()                                                   
  {                                                                            
    return {                                                                   
      key: 1                                                                   
    };                                                                         
  },                                                                           
  handleSelect:function(key)                                                   
  {                                                                            
    this.setState({key});                                                      
  },                                                                           
  render:function()                                                            
  {                                                                            
    return (                                                                   
      <Tabs defaultActiveKey={1} id="controlled-tab-example">                  
        <Tab eventKey={1} title="Tab 1"><One/></Tab>                           
        <Tab eventKey={2} title="Tab 2"><Two/></Tab>                           
        <Tab eventKey={3} title="Tab 3"><Three/></Tab>                         
      </Tabs>                                                                  
    );                                                                         
  }                                                                            
});                                                                            
var One=React.createClass({                                                    
  render:function(){                                                           
    alert("one");                                                              
    return(                                                                    
      <p>We are here</p>                                                       
    );                                                                         
  }                                                                            
});                                                                            
var Two=React.createClass({                                                    
  render:function(){                                                           
    alert("two");                                                              
    return(                                                                    
      <p>We are here</p>                                                       
    );                                                                         
  }                                                                            
});                                                                            
var Three=React.createClass({                                                  
  render:function(){                                                           
    alert("three");                                                            
    return(                                                                    
      <p>We are here</p>                                                       
    );                                                                         
  }                                                                            
});     

我注意到的事情是,每当标签发生变化时,所有标签的渲染功能都会被调用,无论它们是否被选中,这种情况不会发生一次,而是发生3次.这只是一个蹩脚的例子,但如果我在每个标签中都有很多内容,我上面描述的行为肯定会影响网页的性能并使其变慢.我做错了什么或者这是react-bootstrap选项卡的错误,因为逻辑上不应该在每次更改时调用所有选项卡的render函数.

我为Navbar使用React Bootstrap和React Router Bootstrap，并且正在制作用户配置文件下拉菜单列表。

我希望能够显示用户的头像来代替“ title”属性。（与Github上的用户个人资料下拉菜单相同）

这可能吗？我看不到使用任何图像代替NavDropdown标题的选项

<Navbar inverse>
  <Navbar.Header>
    <Navbar.Toggle />
  </Navbar.Header>

  <Navbar.Collapse>
    <Nav pullRight>
      <NavDropdown eventKey={ 3 } id="profile-dropdown" >
        <LinkContainer to="/profile/edit" >
          <NavItem eventKey={ 3.4 } > Edit </NavItem>
        </LinkContainer>
        <LinkContainer to="/logout">
          <Logout eventKey={ 3.5 } />
        </LinkContainer>
      </NavDropdown>
    </Nav>
  </Navbar.Collapse>
</Navbar>

SplitButton或直接Dropdown会是更好的选择吗？我几乎看不到将“ NavDropdown”添加到HTML中的情况。

我刚刚通过React-bootstrap表单,它的用途controlId是什么,它类似于name我们在遗留形式中使用的？

<form>
    <FormGroup
      controlId="formBasicText" ---------------------->> what is the use?
      validationState={this.getValidationState()}
    >
      <ControlLabel>Working example with validation</ControlLabel>
      <FormControl
        type="text"
        value={this.state.value}
        placeholder="Enter text"
        onChange={this.handleChange}
      />
      <FormControl.Feedback />
      <HelpBlock>Validation is based on string length.</HelpBlock>
    </FormGroup>
  </form>

全新的 React Bootstrap，我一直在尝试为组件添加一些自定义样式。

我能够通过使用 chrome 检查器查找类名来从 Nav 中删除边框半径，但是我无法为我的 NavItems 添加悬停效果。

这是我的组件。

 <Navbar inverse collapseOnSelect className="nav-bar">
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">efrt</a>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <NavItem eventKey={1} href="#">Features</NavItem>
        <NavItem eventKey={2} href="#">Who we Are</NavItem>
      </Nav>
      <Navbar.Form pullRight>
        <UniversalButton style="primary" name='Login' />
      </Navbar.Form>
      <Nav pullRight>
        <NavDropdown eventKey={3} title="Signup" id="basic-nav-dropdown">
          <MenuItem eventKey={3.3}>Member</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey={3.3}>Coach</MenuItem>
        </NavDropdown>
      </Nav>
    </Navbar.Collapse>
  </Navbar>

从 Chrome 检查器复制，我得到以下作为我想要进行更改的类/元素

.navbar-inverse .navbar-nav>li>a {
    color: #9d9d9d;
} 

当我尝试以下操作时，没有任何反应。我尝试添加自定义类名也没有效果。

.navbar-inverse.navbar-nav>li>a:hover {
    background: grey;
} 

任何帮助表示赞赏:)！

我正在使用 ReactStrap 的 ButtonGroup 和 Button。当您单击其中一个按钮时，我设置了一个 onClick 函数：

< ButtonGroup >
  <Button>Edit</Button>
  <Button onClick={console.log("Print some text")}>Print text</Button>
  <Button>Set as default</Button>
</ButtonGroup >

但是当我加载页面时，这就是我得到的：

在我什至点击按钮之前。如果我点击它，控制台中什么也没有。有任何想法吗？

在我的应用程序中，我使用 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} …

我正进入（状态

TypeError: Enzyme::Selector 在我尝试测试组件时需要字符串、对象或组件构造函数

我尝试使用ReactWrapper，使用 div 的类并创建一个 id。没有任何效果。

import React from "react";
import Dashboard from "../Containers/Dashboard/Dashboard";
import { BrowserRouter as Router } from 'react-router-dom'
import { configure, shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Container from 'react-bootstrap';
let container = null;
configure({adapter: new Adapter()});

describe('<Dashboard />', () => {
  let wrapper;

  beforeEach(() => {
    const fakeTopic = [
      {
        "name": "javascript",
        "display_name": "JavaScript",
        "short_description": "JavaScript (JS) is a lightweight interpreted programming language with first-class functions.", …