标签: react-bootstrap

我正在尝试将一组react-bootstrap按钮组成一个单选按钮组.我可以使用带有<input type="radio">元素的bootstrap轻松完成此操作,但无法弄清楚如何使用react-bootstrap执行此操作.以下代码允许用户选择每个按钮,而不是只选择一个按钮.

JS:

const operationButtons = (    
  <ButtonGroup>
    <Button active>Radio 1</Button>
    <Button>Radio 2</Button>
  </ButtonGroup>
);

React.render(operationButtons, document.getElementById('operationButtonsDiv'));

HTML:

<div name="operationButtonsDiv" id="operationButtonsDiv" data-toggle="buttons"/>

我正在尝试在 a 中右对齐导航栏项目（贡献），navbar.js但我似乎无法弄清楚。导航栏是一个 React 组件，如下所示，

导航栏.js 在这里

import React, {PropTypes} from 'react';
import { Link, IndexLink } from 'react-router';
import { browserHistory, Router, Route } from 'react-router'
var ReactDOM = require('react-dom');

// create classes
var NavBar = React.createClass({
  render: function(){
    return(
      <nav className="navbar navbar-inverse navbar-static-top">
        <div className="container-fluid">
          <div className="navbar-header">
            <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
              <span className="sr-only">Toggle navigation</span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
            </button>
            <NavBrand linkTo={this.props.brand.linkTo} text={this.props.brand.text} />
          </div>
          <div className="collapse navbar-collapse" id="navbar-collapse">
            <NavMenu links={this.props.links} /> …

我正在使用React Bootstrap的Glyphicon组件,但没有一个字形显示.到目前为止,这是我的代码:

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Global from './components/Global';

ReactDOM.render(
    <Global />, 
    document.getElementById('root')
);

Global.js

import React, { Component } from 'react';
import { FormGroup, FormControl, InputGroup, Glyphicon } from 'react-bootstrap';

class Global extends Component {
    render() {
        return(
          <div>
            <h2> Book Explorer!</h2>
              <FormGroup>
              <InputGroup>
                <FormControl
                  type="text"
                  placeholder="Search for a book"
                />
              <InputGroup.Addon>
                <Glyphicon glyph="search"></Glyphicon>
              </InputGroup.Addon>
            </InputGroup>
            </FormGroup>
          </div>
        )
    }
}

export default Global;

这是我的package.json档案:

{
  "name": "setup",
  "version": …

我有一个页面包含多个Bootstrap卡,每个卡是一个组件,每个卡页脚也是一个组件.卡页脚包含按钮.当您单击按钮时,下拉菜单将如下所示打开

在我点击按钮的任何时候,其他下拉应该处于关闭状态.但它发生这样......

要求:还有一件事是当我点击相同的按钮时,应该关闭相应的下拉菜单.

要求:当我点击下拉内的任何项目时,应关闭相应的下拉菜单

我的架构如下

主页组件代码-START

class HomePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      activatedIdStoredInParent: ""
    };
  }
  toggleCountersMenu = (name) => {
    var name1 = name;
    this.setState((prevState) => {
      return {
        activatedIdStoredInParent: name1
      }
    });
  } 

  render() {
   
    const products = this.state.items.map((item, index) => {     
      return <div>
        <Card
          product={item}
          activatedIdStoredInParent={this.state.activatedIdStoredInParent}
          toggleCountersMenu={this.toggleCountersMenu}
        >
        </Card>;
      </div>
    });

    return (
      <div>
        <div className="card-columns">
          {products}
        </div>
      </div >
    );
  }
}

export default HomePage;

主页组件代码 - 结束

卡片组件代码 …

我是 React Js 初学者。React Bootstrap 中是否有间距和边距实用程序类，就像我们在 Bootstrap mt-4、p-5、mx-auto 等中一样。我正在浏览 react-bootstrap 的文档，也在许多平台上搜索过但找不到正确答案。只是想知道它们是否存在。

我遇到了麻烦,我刚刚npm卸载react-bootstrap,然后npm install react-bootstrap,webpack再也无法加载这个模块了.

我像这样启动webpack:

/var/www/cloud/node_modules/.bin/webpack --config webpack.config.js --watch --display-error-details

这里是错误,它只是无法在react-bootstrap中找到package.json:

ERROR in ./core/static/core/js/modules/dashboard/admin/Customer.js
Module not found: Error: Cannot resolve module 'react-bootstrap' in /var/www/cloud/core/static/core/js/modules/dashboard/admin
resolve module react-bootstrap in /var/www/cloud/core/static/core/js/modules/dashboard/admin
  looking for modules in /var/www/cloud/node_modules
    resolve 'file' react-bootstrap in /var/www/cloud/node_modules
      resolve file
        /var/www/cloud/node_modules/react-bootstrap is not a file
        /var/www/cloud/node_modules/react-bootstrap.js doesn't exist
        /var/www/cloud/node_modules/react-bootstrap.jsx doesn't exist
    resolve 'file' or 'directory' /var/www/cloud/node_modules/react-bootstrap
      resolve file
        /var/www/cloud/node_modules/react-bootstrap is not a file
        /var/www/cloud/node_modules/react-bootstrap.js doesn't exist
        /var/www/cloud/node_modules/react-bootstrap.jsx doesn't exist
      resolve directory
        use lib/index.js from package.json
          resolve 'file' or 'directory' lib/index.js …

我正在使用react-bootstrap我的网站样式.我想添加Navbar所有元素镜像到右边的位置.

export default class XNavbar extends React.Component {
  render() {
return (
  <Navbar inverse fluid >

    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">Brand</a>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>

    <Navbar.Collapse>
      <Nav>
        <NavItem eventKey={1} href="#">Hello</NavItem>
        <NavItem eventKey={2} href="#">World</NavItem>
      </Nav>
    </Navbar.Collapse>

  </Navbar>
)}
}

结果是

但我真正希望它是什么

[                                                           World Hello Brand ]

我试着用pullRight的<Navbar,但没有奏效.我也补充说<html dir="rtl">,但这也没有帮助.我该怎么做？

我曾多次尝试使用<Form>和<FormControl>组件.每次我使用我都会得到相同的错误:

"warning.js？8a56:45警告:React.createElement:type不应该是null,undefined,boolean或number.它应该是一个字符串(对于DOM元素)或一个ReactClass(对于复合组件).检查render方法的App."

"Uncaught Invariant Violation:元素类型无效:期望一个字符串(对于内置组件)或类/函数(对于复合组件)但得到:undefined.检查render方法App."

即使有这个基本的例子:

import React, {Component} from 'react';
import {FormControl, FormGroup, ControlLabel, HelpBlock, Checkbox, Radio, Button} from 'react-bootstrap';

export default class App extends Component {
  render() {
    return (
      <form>
        <FormGroup controlId="formControlsText">
          <ControlLabel>Text</ControlLabel>
          <FormControl type="text" placeholder="Enter text" />
        </FormGroup>

        <Button type="submit">
          Submit
        </Button>
      </form>
    );
  }
}

有任何想法吗？

假设我们使用的是来自React-Bootstrap的Row ...我们如何在不使用包装器或内部元素的情况下对其进行样式化:

<Row>
  <div className='some-style'>
   ...
</Row>

理想情况下我们可以这样做:

<Row className='some-style> 
  ...
</Row>

但这不起作用,我认为这是因为React-Bootstrap不知道className在Row组件中的位置(它应该只设置具有我想的行样式的div)

我正在使用 react bootstrap，我试图在一行中垂直对齐项目，但没有运气。我的问题是我在其中一列中有一个按钮，因此对于其他列，所有文本都向上移动一点，而按钮及其内容具有更大的高度。我的问题是如何使一行中的所有列具有相同的高度并在中间垂直对齐？到目前为止，我设法找到的唯一解决方案是使用 CSS： tranform: translateY(-50%) 这可以解决问题，但我正在寻找更好的动态解决方案，因为这需要应用于除按钮列之外的每一列

编辑：当我说列和行时，我说的是引导程序的 Col 和 Row，实际上不是表或行和列；很抱歉对于这个误会