最近我转移到css模块，但我也在我现有的项目中使用react-bootstrap，我不知道如何在css模块中包含react-bootstrap，任何帮助或建议都将不胜感激。
浏览 16提问于2020-01-21得票数 0
回答已采纳
我正在尝试使用react-bootstrap创建一个导航栏我已经安装了节点模块，它是"@types/react-bootstrap": "^0.32.11",，我想在我的hello.tsx组件中使用它，但它显示编译错误模块未找到:错误:无法在：\Query Express\Portal\src\components中解析' react-bootstrap‘我不明白它为什么要在组件目录中查找react-bootstrap
import * as React from "react";
import { Navbar, Nav, NavIte
浏览 0提问于2018-07-24得票数 4
回答已采纳
我在我的项目中使用了webpack 2和react-bootstrap；无论我尝试使用哪条import语句，我都找不到如何正确应用bootstrap CSS样式似乎没有加载.css文件。
据我所知，我不需要完整的bootstrap包和javascript等，因为我使用的是react-bootstrap；我只需要CSS。因此，我在main.js文件中添加了以下内容：
import 'bootstrap/dist/css/bootstrap.css';
它似乎起作用了(没有错误消息)，但是样式没有应用...
我在我的webpack配置文件中配置了css loader，如webpac
浏览 14提问于2017-02-24得票数 6
回答已采纳
1回答
设置react引导简单应用程序
、、、、
我正在设置一个入门应用程序使用react引导+需求+ bower + php (而不是nodejs)。对这一系列的工具来说都是很新的。这是我的应用程序：
.bowerrc
{
"directory": "javascript/components/",
"analytics": false,
"timeout": 120000
}
bower.json
{
"name": "hello-react-bootstrap",
"version": "1.0.0
浏览 4提问于2015-04-13得票数 2
我有两个不同的页面和两个不同的css (每个html页面一个)，如果我在其中一个页面中修改.table{}，那么css将应用于所有页面。我使用react引导
我希望page1中有一个100%宽度的表，page2中33.3%宽度的表。
page2：
import React from 'react';
import Container from "react-bootstrap/Container";
import {Jumbotron} from "react-bootstrap";
import Row from "react-b
浏览 0提问于2019-04-19得票数 0
回答已采纳
每次我尝试使用来自'react-bootstrap‘的组件时，我都会遇到一些奇怪的错误。下面是我导入"HelpBlock“组件的一些小示例。 import PropTypes from 'prop-types';
import React from 'react';
import HelpBlock from 'react-bootstrap';
class RegisterFormDetails extends React.Component {
...
<HelpBlock>{va
浏览 36提问于2019-03-03得票数 0
2回答
现在，我正在检查我的应用程序，更改此模式的实例：
import {Grid, Row, Col} from 'react-bootstrap'
转入：
import {Grid, Row, Col} from '../react-bootstrap'
其中，react-bootstrap.js是我项目根部的一个简单文件，它有选择地从NPM包导入我需要的ES6模块：
import Grid from 'react-bootstrap/es/Grid'
import Col from 'react-bootstrap/es/Col
浏览 3提问于2017-12-11得票数 4
我使用了react-bootstrap模式来显示React中的通知。它工作得很好，但当我在模式之外单击时，它并没有关闭。 模态代码 import React from "react";
import ReactDom from 'react-dom';
import Modal from "react-bootstrap/Modal";
import ModalBody from "react-bootstrap/ModalBody";
import ModalHeader from "react-bootstrap/M
浏览 14提问于2020-04-17得票数 0
回答已采纳
3回答
我有麻烦了，我刚做了npm uninstall 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/a
浏览 2提问于2015-07-10得票数 21
我在尝试更改导航栏的颜色时遇到问题。我遗漏了什么步骤吗？
这是我试图呈现的组件：
import React from 'react';
import { Nav, Navbar } from 'react-bootstrap';
import styles from './MainMenu.module.css';
const Topbar = () => {
return(
<Navbar className={styles.mainBar}>
<Navbar.Brand&g
浏览 8提问于2021-06-04得票数 1
1回答
我的主应用程序视图
import React from "react";
import Col from 'react-bootstrap/Col';
import Card from 'react-bootstrap/Card';
import "./Village.module.css";
const VillageItem = ({ label, fields, className }) => {
return (
<Col xs={12} sm={12} md={4} lg={4}&
浏览 1提问于2020-10-28得票数 1
回答已采纳
2回答
我对反应和引导都是新手，所以我已经开始用react-bootstrap和他们一起玩了。我听说覆盖引导CSS最简单的方法之一是在引导CSS之上应用您自己的CSS。所以我有下面的一页
我有下面的App.js
import React from 'react';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap/Container';
浏览 1提问于2020-04-26得票数 1
如何在Modal中单击remove按钮时删除显示的内容。
当从数组中单击remove按钮时，我可以删除该对象，但该内容仍显示在屏幕上。
我认为从数组中删除对象将重新启动map函数，该函数将再次调用循环，新内容将可见
import React from "react";
import { Modal, Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
let data = [
{
Name: "COOL",
浏览 26提问于2020-07-31得票数 0
我在类型记录中使用React，但不能与commonjs以外的模块一起使用React。
我首先安装了react-bootstrap包：
$ npm i react-bootstrap
然后编写使用它的代码，例如，
// src/index.tsx
import { Button } from 'react-bootstrap';
但是，当我在谷歌上搜索这个问题时，npx tsc编译它得到了一个错误Cannot find module 'react-bootstrap' or its corresponding type declarations.，我发现react
浏览 4提问于2020-07-04得票数 2
我正在构建一个多个选择，用一个selection引导的。
尽管将项的active属性设置为false，但最后单击的项在其类列表中仍然处于活动状态。
我一直在考虑获取列表项的引用并操作类列表，但这太脏了。
我试图更改variant属性的ListGroup.Item，但是active类重写了该属性。我倾向于不修改css类定义。
我更喜欢使用ListGroup的ListGroup处理程序，而不是从可用性的角度使用ToggleButton的onClick事件。
您是否尝试过使用ListGroup来操作多个选择？
下面是代码的剥离版本：
import { useState } from "rea
浏览 1提问于2021-05-28得票数 1
回答已采纳
我正在尝试改变react-bootstrap中accordion元素移动的方向。目前它正在向下移动。有没有一种简单的方法让它朝上打开？
下面是我的一个组件的示例。我希望能够向上而不是向下打开它，原因是我把它放在了屏幕的底部，所以当我在默认设置下打开它时，它会向下而不是向上：
import React from 'react';
import { Accordion, Card, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
cons
浏览 0提问于2019-10-21得票数 2
例如，引入的推荐方法是这样做：
import Button from 'react-bootstrap/Button'而不是import { Button } from 'react-bootstrap';
原因是“这样做只吸引了您使用的特定组件，这可以显著减少最终发送到客户端的代码数量。”
来源：
React组件也是如此：
import Button from '@mui/material/Button';
来源：
我想在库中实现类似的东西，以限制包中代码的使用，但我不知道它们是如何实现这个特定模式的。我看过他们的代码库，但我不太明白。
浏览 10提问于2022-07-10得票数 0
2回答
有没有办法和一起使用？react-bootstrap公开了组件的bsClass属性，而不是className属性，这似乎与样式组件不兼容。
有什么经验吗？
浏览 12提问于2017-08-26得票数 51
我在我的项目中的许多页面上导入了一个加载组件，在这个组件中我使用的是一个模型，这个模型是我在这个组件中导入的CSS文件中重写了一些他的CSS样式的一个模式。我的问题是，这个CSS变化对我的项目中的其他模式产生了影响，我怎么能让这个CSS更改只与我的组件模式相关，而不影响其他的。
我的装货部件
import React, {Component, PropTypes} from 'react';
import {Modal} from "react-bootstrap";
import ReactLoading from 'react-loading'
浏览 4提问于2022-06-21得票数 1
回答已采纳
1回答
我正在使用react和react-bootstrap为一个电子商务网站构建一个评论微服务，并在一个按钮前显示5条评论，以扩展所显示的评论。我希望在我的reviewList组件中的评论组件列表的底部，在我单击按钮以显示更多评论之前，边缘是淡入淡出的。
我有一个来自Etsy的例子，正是我希望它看起来的方式。
我已经尝试了一些css和react-bootstrap，但我只需要评论组件的整个reviewList组件的底部就可以淡出。
示例如下：
你可以看到最后一篇评论的底部是褪色的。
我希望底部处于淡入淡出状态，直到单击展开按钮，但只能找到动画或淡入淡出每个审查组件的方法。
浏览 18提问于2019-07-16得票数 0
回答已采纳
我正在尝试创建一个预算应用程序，在代码框上作出反应。但我和ReactDom.render有问题..。我不知道我是进口了错误的东西，还是没有正确地出口。我得到的错误是(元素类型无效:需要一个字符串(用于内置组件)或一个类/函数(用于组合组件)，但是got: undefined。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入。)检查App的呈现方法。)
下面是index.js：
import React from "react";
import ReactDom from "react-dom";
import "bootstra
浏览 3提问于2022-03-27得票数 0
我是第一次接触reactjs。我正在尝试使用react webapp的普通CSS来改变背景颜色，但是当我使用react-bootstrap时，它不会改变。有没有办法通过react-bootstrap做到这一点呢？ 我将react-bootstrap包含到 import 'bootstrap/dist/css/bootstrap.min.css'; 在我使用create-react-app模板创建的index.js文件中。
浏览 8提问于2020-12-27得票数 0
回答已采纳
3回答
在我的应用程序中使用Bootstrap中的React模式时，我遇到了一个小问题。 在index.hmtl中，我导入以下内容： <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/bootstrap-theme.min.css"> 然而，它将CSS应用于我的应用程序中的所有内容。我不想要这个，因为它打破了整个风格。我不能在我的组件中自定义Bootstrap中
浏览 62提问于2020-12-16得票数 1
回答已采纳
当我通过单击菜单按钮展开navBar时，我希望dropdown具有完全高度(100vh等)，UI应该如下所示：
这是当前移动用户界面：
我该怎么做呢？
App.js
import React from "react";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import NavDropdown from "react-bootstrap/NavDropdown";
import Cont
浏览 2提问于2021-12-20得票数 0
1回答
我正在尝试理解如何使用react-bootstrap。我在我的index.html中导入了整个js文件，如下所示
<!-- react-bootstrap -->
<script src="lib/react-bootstrap/dist/react-bootstrap.min.js"></script>
在另一个js文件中，我正在创建一个Navbar，我发现我必须从ReactBootstrap创建一个变量，如下所示：
var Navbar = ReactBootstrap.Navbar;
...
const MyNavBar = (
&
浏览 0提问于2015-11-21得票数 2
有没有人知道你能不能在Next.js中使用react-bootstrap？我使用的是两者的最新版本，现在我可以提供代码，但现在我的应用程序没有抛出任何错误，它只是没有注册我的任何react-bootstrap组件。也许有一些我在网上找不到的窍门？如果有帮助，我可以提供代码或文件结构。提前感谢！
next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
/* my next config */
})
pages/index.js
import Badge fro
浏览 3提问于2019-10-22得票数 22
回答已采纳
2回答
我必须在外部添加css文件。尝试使用代码导入"./Login.css"；它位于基本路径中。无法获得文件，这将出现如下所示的错误。
您可能需要一个适当的加载程序来处理此文件类型.
.Login {
padding: 60px 0;
}
我在webpack的配置中也更新了。
Webpack配置：
var config = {
entry: './main.js',
output: {
path:'/',
filename: 'index.js',
},
devSer
浏览 0提问于2018-03-17得票数 5
2回答
解决方案从用户(某人特殊)：我需要导入引导css
import 'bootstrap/dist/css/bootstrap.css';
我有以下代码，而更改bg=“黑暗”或“光”没有任何作用。我正在尝试向()学习。但是，由于某些原因，我不能更改NavBar组件的背景色。
import React, { Component } from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Navbar';
imp
浏览 3提问于2022-02-20得票数 1
我正在使用file_get_contents获取html。我从html页面提取css和js。现在我正在使用一个非常昂贵的功能。
$css_elements = $doc->getElementsByTagName('link');
foreach ($css_elements as $css_element) {
$Jdocument->addStyleSheet($css_element->getAttribute('href'));
}
我想将csss链接保存到一个文件中，然后读取该文件并将链接作为一个整
浏览 3提问于2013-08-06得票数 0
1回答
我试图增加react-bootstrap交换机的大小，但它似乎不起作用。我试着阅读文档并查找它，但除了直接更改引导css之外，我找不到任何其他方法。下面是代码：
import Form from 'react-bootstrap/Form';
function SwitchExample() {
return (
<Form>
<Form.Check
type="switch"
id="custom-switch"
label="Check th
浏览 3提问于2022-10-25得票数 0
回答已采纳
1回答
import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.scss';
import { Container, Row, Col } from 'react-bootstrap';
import ShoesCard from './components/ShoesCard';
浏览 3提问于2020-03-06得票数 0
回答已采纳
1回答
用Jest测试组件
、、、
我对Jest和JavaScript一般都是新手。我正在尝试用Jest测试我的java脚本代码。
在安装Jest和周围的所有其他依赖项之后，初始的App.test.js将失败：
FAIL src/App.test.js
● Test suite failed to run
TypeError: Cannot read property 'bool' of undefined
2 | import logo from './logo.svg';
3 | import './App.css';
> 4 | import { Gr
浏览 1提问于2018-09-06得票数 1
回答已采纳
2回答
这是我的webpack.config.js。我不能让它起作用。除了这些代码之外，我还为我的根组件提供了'import‘./style.css’。我将代码分成两个包，并希望获得第三个包，这次是使用css。但是，它不起作用。帮助!
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
app: ['./src/App.jsx'],
vendor: ['react','re
浏览 1提问于2019-07-05得票数 1
回答已采纳
我正在尝试在我的“房间”页面中呈现一个可重复使用的卡片。但是，当我运行npm start时，它没有显示出来，而当我检查时，它显示0 x 0像素。代码如下： 我在这里有CardC组件： import React from "react";
//import "../css/community.css";
import Table from "react-bootstrap/Table";
import Container from "react-bootstrap/Container";
import "bootstrap
浏览 21提问于2021-07-23得票数 1
我是Typescript新手，我正在尝试使用
案例1：import {Button} from 'react-bootstrap/lib/Button'
案例2：import * as Button from 'react-bootstrap/lib/Button'
这两种方法都不会在导入语句上抛出任何错误，而是在使用<Button bsClass="glyphicon glyphicon-new-window"></Button>呈现此按钮时抛出错误
在案例1中，没有编译时错误，只有Button is undefined
浏览 9提问于2017-04-13得票数 0
回答已采纳
我刚开始我的网络应用程序是为了学习React.Js，我想知道，基于我在互联网上看到的许多例子，使用react-bootstrap组件还是使用纯HTML更好？
就像NavBar一样，我应该使用import { NavBar } from 'react-bootstrap';并使用组件，还是使用纯html，如<div class="navbar"><div/>。只是如果我想个性化它的设计，就像CSS一样，它如何与react一起工作？
谢谢您抽时间见我
浏览 2提问于2018-01-21得票数 0
1回答
我在我的react项目中使用了react-bootstrap前端库。React-bootstrap组件不能正常工作。 我也检查了官方的react-bootstrap网站，它也错过了网站的样式。 样式问题的原因可能是什么？ 我已经尝试在index.js文件中添加import 'bootstrap/dist/css/bootstrap.min.css'；，但这会影响我的其他UI组件，我不想搞乱它们。
浏览 24提问于2019-05-08得票数 1
到目前为止，我正在使用axios完成我的第一步，并由以下步骤组成：
import Navbar from 'react-bootstrap/Navbar';
import Form from 'react-bootstrap/Form';
import {InputGroup} from "react-bootstrap";
import axios from 'axios';
const api_key = process.env.API_KEY;
const SearchInput = () => {
asy
浏览 10提问于2022-11-08得票数 0
回答已采纳
我已经安装了react-bootstrap，并且已经证明我可以使用网格组件，这是我的主要需求。但是为什么找不到"Container“，我应该如何包装我最外层的内容，以便我的页面有页边距和通常由bootstrap设置的其他内容？
我知道我可以使用常规的CSS，但是(a)容器不是更干净以匹配内部的引导吗？(b)除了空白处，还应该有什么东西来包装所有内部的东西，并且仍然可以很好地工作？
浏览 0提问于2017-07-02得票数 6
回答已采纳
1回答
我使用下面的div生成所附图片。有推荐的方法让这两个图标对齐吗？
<div className='my_node'>
<div style = {{display:"flex"}}>
<Button variant="light" style={{margin: '0px'}} onClick={handleShow}><BiEdit className="transparent-layer"
浏览 1提问于2022-01-11得票数 0
回答已采纳
我想在小屏幕设备上隐藏<Col></Col>。我查看了react-bootstrap文档，但它没有提到如何做到这一点。
在纯react + bootstrap中可以实现<div className="hidden-xs"></div>，但是使用库react-bootstrap就不再工作了。我试过了：<Col xs="0"></Col>和类似的，但都不起作用。
有人知道如何隐藏react-bootstrap列吗？
浏览 1提问于2019-04-07得票数 3
我想上传一个文件(仅限于csv和xsl )并读取它。我还想使用react-bootstrap来采样它的数据。
我刚开始使用react和react-bootstrap甚至html css。
到目前为止，我一直在使用
<input
id="formControlsFile" type="file"
accept=".csv"
onChange={this.rhandleForce}
ref={function(ref) { this.
浏览 3提问于2018-06-22得票数 1
我刚刚开始在我的站点中实现React-Bootstrap，但是单击它时NavDropdown组件不会展开。
我做了什么：npm install -s react-bootstrap
添加css到html：<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
已创建我的Navigation组件：
import React from 'react';
import PropTypes fro
浏览 1提问于2017-11-19得票数 10
我为ListGroups使用的React-Bootstrap代码有一个名为"Sonnet“的组件，该组件可能尚未在React-Bootstrap中导出，因此我面临的”Sonnet“不能从”React-bootstrap“问题导出，即使我尝试手动导入它或使用"*”导入完整的React-bootstrap包。我还没有找到一个单独的帖子或博客，甚至列出了“十四行诗”的错误或任何事情。需要你们帮我理解一下！ 我的尝试是:从‘react-bootstrap’重新安装bootstrap/ import {Sonnet}；从‘react-bootstrap’作为ReactBootstrap
浏览 75提问于2019-05-06得票数 3
回答已采纳
我已经使用以下命令安装了react-bootstrap： npm install react-bootstrap bootstrap 命令，并成功导入： import Carousel from 'react-bootstrap/Carousel'
<Carousel>
...
</Carousel> 但是它的风格并不适用！我需要做些什么才能正确使用它？
浏览 26提问于2020-12-10得票数 0
回答已采纳
我在寻找如何改变它，但似乎没有一个解决方案对我有效。
我想覆盖react-bootstrap按钮的颜色。
下面这个解决方案运行得很好，也正是我想要做的：
<Button
block
style={{backgroundColor: '#0B0C10', borderColor: '#45A293', color: '#45A293', borderRadius: '100px'}}
>
sample text
</Button>
但我不想每次使用按钮时都重写它，所以我想用css解决方案，我
浏览 0提问于2019-03-21得票数 2
这就是我的意思：
import BsssButtonGroup from "react-bootstrap/ButtonGroup";
它的工作方式与以下方法相同：
import ButtonGroup from "react-bootstrap/ButtonGroup";
..and我不明白为什么？
BsssButtonGroup不是React中ButtonGroup组件中现有或定义的组件，那么我如何能够导入它呢？究竟进口的是什么？写一些随意的名字是怎么回事？？我以为你必须进口导出的组件？但是BsssButtonGroup不是导出的，那么我怎么能够导入它呢？
浏览 3提问于2022-09-07得票数 0
1回答
如标题所示，我按照引导程序执行安装步骤，并在使用create-react-app后响应-引导文档。
npm install --save react-bootstrap bootstrap@4.0.0-alpha.6
然后在index.html中包含一个指向引导CDN的链接，以防万一：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIRes
浏览 2提问于2017-07-17得票数 2
回答已采纳
如何从我的肚脐社交图标重定向到社交媒体链接？
当点击Instagram图标时，我想重定向到Instagram页面，等等。
谢谢。
这是我的代码：
import React from "react";
import { Nav } from "react-bootstrap";
import { Navbar } from "react-bootstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faInstagra
浏览 2提问于2022-04-25得票数 1
我是web开发的新手，我正在尝试定制react-bootstrap导航栏的颜色。
这是我的NavbarComponent.cs文件的内容：
var React = require('react');
var ReactDOM = require('react-dom');
import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstr
浏览 2提问于2016-11-19得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
