React网格系统等同于Bootstrap的网格系统？
React网格系统与Bootstrap的网格系统有一些相似之处，但并不完全等同。
React网格系统是基于React框架开发的一个网格布局系统，它可以帮助开发者在前端界面中轻松地创建灵活的网格布局。它提供了一组组件，使得开发者可以方便地定义和管理网格布局，包括行、列、偏移、媒体查询等。
Bootstrap的网格系统是Bootstrap框架中的一个重要组成部分，也是其最著名的特性之一。它提供了一套响应式的网格布局工具，可以让开发者更加便捷地创建自适应的网页布局。Bootstrap的网格系统基于12列的布局结构，通过指定每个元素所占的列数，从而实现网页的灵活布局。
两者的相似之处在于它们都提供了一种方式来创建网格布局，并且都具有响应式的特性，可以适应不同设备和屏幕尺寸。同时，它们都提供了一套规则和组件，可以帮助开发者快速搭建网页布局。
然而，两者也有一些区别。首先，React网格系统是基于React框架开发的，而Bootstrap的网格系统是基于Bootstrap框架开发的。其次，React网格系统更加灵活和可定制，开发者可以通过编写自定义的组件和样式来实现更复杂的布局需求。而Bootstrap的网格系统则提供了一套预定义的规则和样式，可以让开发者更加快速地搭建常见的网页布局。
在应用场景上，React网格系统适用于React项目中需要灵活、高度定制化的网格布局需求的场景。而Bootstrap的网格系统适用于使用Bootstrap框架的项目中，希望快速搭建响应式网页布局的场景。
关于腾讯云的相关产品和介绍链接，因为要求不提及具体品牌商，所以无法直接给出链接。但是腾讯云也提供了一些云计算相关的产品和服务，如云服务器、容器服务、云数据库等，可以根据具体需求查阅腾讯云的官方文档或者进行相应的咨询。
相关·内容
我希望开始设计我的React应用程序。我之前使用过Bootstrap的网格系统，现在正在寻找React网格系统。React开发人员通常在其App的网格系统/布局中使用什么？
浏览 72提问于2017-06-16得票数 5
回答已采纳
4回答
我正在寻找一种方法来实现一个响应式网格系统，以使用react和material-ui开发材料设计应用程序。
虽然React-Bootstrap有，但我还没有找到与Material-UI类似的东西。很好，但并不完全一样。有什么解决方案吗？
浏览 6提问于2016-05-19得票数 3
我正在寻找一个完整的功能(如编辑，删除，插入，列上的分组，分页和额外的) reactjs的数据网格。经过搜索，我发现了react-bootstrap-table ()，它有我想要的所有功能，除了group by on columns。是否有其他react数据网格或任何人知道如何在react-bootstrap-table中添加group by？
浏览 1提问于2016-12-06得票数 0
像这样在react native中使用flex是个好主意吗?创建自己的组件来获取flex值?我之前使用的是bootstrap网格系统，现在我正在尝试学习react native。
有没有办法在堆栈上使用react-native bootstrap来显示这个示例？
let FlexContainer = ({direction,children}) =>{
console.log(direction)
var style = {
flexDirection:direction || 'row',
display:'flex'
浏览 3提问于2017-10-10得票数 0
我无法让bootstrap类与react-bootstrap一起工作 我尝试过在react-bootstrap中使用bootstrap类，特别是flex属性，但似乎不起作用。但是在文档上显示了他们使用它"https://react-bootstrap.netlify.com/layout/grid/“的一个例子，而且文档看起来非常模糊，所以我去了bootstrap的文档，但也没有用。 我注意到，当我更改了多少个md=(如此列md={4})时，我想要一个特定的列元素来占据此按钮的位置更改，即使它应该在中心，为什么？下面是我的代码示例 import React from 'rea
浏览 2提问于2019-04-22得票数 0
在我的react应用程序中，我只需要来自bootstrap的网格系统，因为来自bootstrap的默认样式会使我的样式崩溃。我怎么能只使用网格系统呢？
浏览 21提问于2019-08-16得票数 4
回答已采纳
1回答
我正在尝试创建一个网站，并尝试创建一个网格。因为我不擅长CSS，所以我使用bootstrap。 然而，我不能想出如何从我拥有的图像数组中创建网格，这样它也是反应性的。 import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import React, { Component } from 'react'
export defaul
浏览 15提问于2019-05-31得票数 0
回答已采纳
2回答
我在react引导Jumbotron内部创建了一个网格，但是当我将它导出到我的app.jsx时，没有显示任何网格内容(但是Jumbotron和我的自定义样式是)
我所有的其他组件都正常工作，所以我不知道为什么没有。
App.js:
import React, { Component } from 'react';
import {Grid} from 'react-bootstrap';
import {Row} from 'react-bootstrap';
import {Col} from 'react-bootstrap'
浏览 4提问于2017-07-21得票数 0
回答已采纳
我有(https://codesandbox.io/s/9zok7jx4ro)包含大量项目的Devextreme网格(下面的代码只显示了其中的一部分)，问题是网格溢出了包含该网格的div元素。我想要求网格创建内部滚动条，并尊重由包含div元素提供的可用空间。我该怎么做呢？ 我有以下代码： import React from "react";
import ReactDOM from "react-dom";
import {
Grid,
Table,
TableHeaderRow
} from "@devexpress/dx-react-g
浏览 6提问于2019-01-16得票数 0
我正在尝试在React中使用Bootstrap。Bootstrap按钮和网格正常工作，但用于bootstrap的CSS未显示。有没有单独添加引导CSS的步骤？
浏览 11提问于2018-08-19得票数 2
回答已采纳
我很难理解如何将bootstrap与React和Webpack构建一起使用。我想使用bootstrap的网格布局和各种功能(似乎react-bootstrap提供了bootstrap的所有功能？)想知道设置这个的最好方法是什么。
例如，我使用正常引导方法和react- bootstrap的组件尝试了以下方法，但它们似乎不起作用。另外，您建议如何使用css重置来标准化所有内容？首先，谢谢你的帮助。
import React from 'react';
import mui from 'material-ui';
import style from &#
浏览 2提问于2016-01-26得票数 4
我正在使用webpack开发一个示例react redux应用程序。
webpack.config.js
var path=require('path');
const webpack = require('webpack');
module.exports= {
entry : './src/app.js',
output : {
filename : 'bundle.js',
path : path.resolve(__dirname,'public')
浏览 2提问于2020-06-13得票数 0
回答已采纳
1回答
反作用自举网格中的等宽等高单元
、、、、
我正在努力使react-bootstrap网格中的react-bootstrap单元格具有自动等宽和高度相等的。这些单元格的内容大小将改变，整个网格的宽度也会有所不同。其目标是使其响应和独立于单元格内容的大小。
此外，我正在考虑使用像FlexBox布局这样的现代布局来实现这一目标(如果存在的话)。我以前使用过FlexBox，我知道这可能是实现这种布局的最好方法。
import { Grid, Row, Col } from 'react-bootstrap';
...
<Grid fluid={true}>
<Row className="
浏览 4提问于2016-10-14得票数 0
回答已采纳
我正在尝试在屏幕中间显示网格的容器。为了创建网格布局，我在React中使用了一个bootstrap库。但我没有得到预期的输出。有谁能建议我做这件事的正确方法吗？ App.js import React, { Component } from "react";
import { Col, Row } from "react-bootstrap";
import "./App.css";
class App extends Component {
render() {
return (
<div className=
浏览 14提问于2019-03-07得票数 0
我还是个新手。我刚刚开始按照说明操作，并尝试使用create-react-app。在创建一个空的应用程序后，我尝试添加一个来自的网格。
下面是非常简单的代码：
import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { BootstrapTable, TableHeaderColumn } from 'reac
浏览 0提问于2017-05-17得票数 3
2回答
反应引导问题
、、
网格系统不工作--也许我很笨--但我不明白，我的代码：
import React from "react";
import {Col, Row} from "react-bootstrap";
const Home = () => {
return (
<Row className="home">
<Col xs={6}>2 of 3 (wider)</Col>
<Col xs={6}>3 of
浏览 5提问于2022-01-04得票数 -2
回答已采纳
如何用引导程序4显示正确的webpack 2 rc3配置？
这是我的
这是我的
在npm启动过程中，我得到了这个错误：
./~/extract-text-webpack-plugin/loader.js?{"omit":1，"remove":true}!./~/style-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4，“extract
浏览 6提问于2017-01-11得票数 1
回答已采纳
当我点击屏幕右下角的按钮时，我正试图在我的屏幕上创建一个甜蜜的提示弹出窗口。我希望它位于它所包含的div的中心。我试着把它放在bootstrap网格中并居中。但它似乎不起作用。这是屏幕截图。 ? 这是我的代码。 import React, { Component } from 'react';
import SweetAlert from 'react-bootstrap-sweetalert';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Row, Col, Grid } f
浏览 15提问于2020-07-10得票数 0
回答已采纳
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
我正在尝试使用带bootstrap 3网格的react-burger-menu。我想在我的页面顶部有一行，在左上角有汉堡菜单，其余的行包含一个页面标题，所以我写道：
import React from 'react'
import { slide as ReactMenu } from 'react-burger-menu'
export default class Header extends React.Component {
showAbout(event) {
event.preventDefault()
console.log(
浏览 11提问于2017-08-13得票数 0
1回答
我正在react中使用LightningChartJs，并且希望在不刷新图表或不干扰hand.Right中的图表操作的情况下动态更改仪表板的网格。现在，我正在尝试使用条件检查来设置网格设置，但由于createChart方法只在开始时运行，因此不会刷新。 提前谢谢。 编辑： 作为一种变通方法，我使用bootstrap自己管理网格。
浏览 13提问于2020-07-08得票数 1
回答已采纳
6回答
我目前正在尝试学习反应，和反应
我试图充分利用反应-引导网格布局。我不确定我是否不正确地实现它。我的直觉说我在某个地方使用了一个改进版本，因为据我所知，"Container，Row“功能根本不起作用。
有什么问题吗？我没有主意了。
来自package.json的版本：
"dependencies": {
"bootstrap": "^4.3.1",
"jquery": "^3.0.0",
"react": "^16.8.4",
"r
浏览 0提问于2019-03-21得票数 11
回答已采纳
我是Reactjs编程的新手，我有一个使用react bootstrap网格的组件。
我想每隔5秒从一些公共API中获取一个quoute，并将其显示在
网格内部。我还想使用axios来获取报价。任何教程或任何帮助都将不胜感激。谢谢您:)
浏览 1提问于2018-07-03得票数 2
回答已采纳
1回答
我开始创建一个类似react应用程序的博客，并使用引导网格系统。我的两栏之间似乎有很大的空隙。有办法摆脱这个吗？屏幕截图附在一起。
import React from 'react';
import ReactDom from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import faker from 'faker';
//Now create a new component
浏览 0提问于2019-08-01得票数 0
回答已采纳
我正在尝试学习useState和useEffect，但当React说我有一个内存泄漏时，我就搞不懂了。老实说，我以前甚至没有意识到我造成了内存泄漏，尽管我检查了，但我仍然不完全确定是什么导致了它们。
如果任何人不介意回顾一下我在下面写的一个非常简单的导航栏，我将非常感谢。
import React, { useEffect, useState } from 'react';
import { useAuth } from '../context/auth';
import Login from '../pages/Login';
import {
浏览 3提问于2020-08-12得票数 0
我正在使用react bootstrap试图显示一个简单的2x2网格。这应该非常简单，但是列和行在所有屏幕尺寸上都是垂直显示的。它应该看起来像这样：
A B
A B
而是看起来像这样：
A
B
A
B
代码如下：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Home from './Home.js';
import * as serviceWorker from './serviceWor
浏览 1提问于2018-12-04得票数 1
2回答
虽然此路由对/verify_email有效，但不适用于/校验_email/测试：
<Router>
<AuthProvider>
<Fragment>
<Switch>
<Route path="/business_owner_signup">
<MerchantSignup />
</Route>
<Route path="/verif
浏览 7提问于2020-07-27得票数 1
回答已采纳
我在我的react js项目中使用了bootstrap。我正在使用css网格显示一些卡片，但它没有响应。
import React from "react";
import "./Project.css";
export const Project = () => {
return (
<div>
<div className="container tracked">
<div className="card">
<
浏览 0提问于2019-07-22得票数 1
我已经开发了一个React应用程序，在其中我使用了下面提到的模块。
"babel-runtime": "^5.1.10",
"core-js": "^0.9.6",
"flux": "^2.0.1",
"fs": "0.0.2",
"griddle-react": "^0.2.13",
"humps": "0.0.1",
"invariant": "^2.0.0",
浏览 0提问于2015-12-03得票数 0
我正在使用React bootstrap，并使用它的Row和Col组件。默认情况下，列是水平居中对齐图像。如何将此图像移动到列中的左侧？ 代码 import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Image from "react-bootstrap/
浏览 47提问于2021-06-21得票数 0
2回答
我一直在努力让Bootstrap 3的网格布局系统在IE8中很好地工作，但它就是不起作用。我不需要有任何反应的布局。
为了确保我没有在我创建的HTML文件中引入一些随机错误，我继续下载了一个新的Bootstrap 3副本。在提取内容之后，我打开了示例网格HTML文件(在/examples/grid文件夹中)，瞧，即使在官方发行版中，网格也出现在彼此之上，而不是跨越一行！
但奇怪的是，当我浏览IE8上的在线文档的IE8部分时，网格布局似乎工作得很好。
浏览 3提问于2013-09-12得票数 5
回答已采纳
我有一个react组件，在选项卡窗格中列出了其他组件的网格，所有这些组件都来自react-bootstrap，并包含在一个div中，该div具有bootstrap的漂亮的中心填充容器。不幸的是，Tab中的Grid似乎认为它应该一直延伸到屏幕的右边。我怎样才能确保它在父div的宽度内？
下面是代码的要点：
render() {
return (
<div class="container">
<Tabs>
<Tab>
<Grid>
浏览 1提问于2016-04-01得票数 2
我正在尝试使用ButtonGroup实现多选，就像中的第一个示例一样，只使用react-bootstrap。有可能吗？主要目标是使用ButtonGroup实现多选行为，将其用作网格中对象的过滤器。
浏览 2提问于2017-01-22得票数 2
我正在试着安装react引导程序。当我运行命令时
npm install react-bootstrap --save
我得到以下内容(一些路径名替换为“.”)：
npm WARN saveError ENOENT: no such file or directory, open '/Users/../package.json'/Users/.../..
├── UNMET PEER DEPENDENCY react@>=0.14.0
├─┬ react-bootstrap@0.30.7
│ ├─┬ babel-runtime@6.20.0
│ │ ├──
浏览 3提问于2016-12-23得票数 0
回答已采纳
如果我的react应用程序根中还有其他元素，那么我的布局元素就会处理跳转。如果我删除响应网格布局上方的导航条组件，我可以正确地单击和拖动，否则，当我试图单击响应网格布局元素时，它会跳下。
这是我的密码：-
App.js
import React from 'react';
import './App.css';
import '@devexpress/dx-react-grid-bootstrap4/dist/dx-react-grid-bootstrap4.css';
import PyfinNavbar from './compone
浏览 3提问于2020-01-28得票数 2
我有过Twitter Bootstrap和Foundation的经验，我个人认为我唯一想使用的是他们的网格系统。其他功能只是臃肿。
所以我读到了网格布局的前景。我发现的所有文章都是面向“艺术”解释的(黄金分割等)。我本质上是一个编码器，我需要一个清晰而合理的理由来使用网格布局(例如：“在移动屏幕上，列可以很容易地堆叠在一起，在更大的屏幕上水平扩展”)。有人能告诉我将网格系统应用到我的网站上的利弊吗？你个人认为使用网格系统是好的吗？
如果答案是肯定的，我应该使用一个预先制作的网格系统，比如来自Twitter Bootstrap/Foundation的网格系统，还是只为我自己制作一个网格系统？所有
浏览 0提问于2013-09-05得票数 3
回答已采纳
3回答
许多支持响应式技术的库使用12列网格系统。例如，默认的Bootstrap网格系统使用12列
使用12列系统而不使用其他系统背后有什么原因或逻辑吗？
浏览 1提问于2015-01-20得票数 1
我有一个JS应用程序，它用来自ASP .NET Core的条目更新引导网格表。
我需要在插入后用新的条目更新网格。我是在componentDidUpdate()的帮助下这样做的，并在那里使用了refreshList()函数，但是我得到了refreshList()函数的无穷大循环。
对于如何在没有那个循环的情况下更新网格，有什么想法吗？
import React, {Component} from 'react';
import {Table, Container} from 'react-bootstrap';
import {Button, Bu
浏览 5提问于2020-05-30得票数 0
回答已采纳
1回答
我已经尝试了几个小时，尝试了我找到的不同的例子，但似乎都没有奏效。
我想做什么(没有自定义JS)：
但是，我不能让它在Bootstrap中工作。我特别使用React-Bootstrap (对于那些不熟悉React/React-Bootstrap的人，我已经将以下代码更改为普通HTML )，但我不认为这是问题所在。我有一个大致的设置：
<body>
<div class="container-fluid main">
<div class="row">
<div class=
浏览 1提问于2015-03-23得票数 0
我正在使用React。我有一页有一张桌子。单击按钮后，表的右侧将显示一个详细信息表单。表格设置在网格为-10的列中，并且需要占用页面网格列的大部分。详细信息表单设置在具有网格4的列中。 它不会被反映出来，但这里是到游乐场代码的链接：https://codesandbox.io/s/inspiring-grothendieck-bkygv?file=/src/table.js 任何帮助(css、bootstrap等)非常感谢。
浏览 17提问于2021-06-23得票数 1
回答已采纳
我正在将我的Bootstrap主题从v2.3.2迁移到v3.0.0，我注意到的一件事是，由于bootstrap.css中的以下样式，许多维度的计算方式不同。
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
有人能解释为什么Bootstrap将所有元素的框大小切换到边框吗？我怀疑这与新的基于百分比的网格系统有关，但上面的选择器显然不仅仅适用于网格元素。
似乎有点激进的imho :-)
有人愿意
浏览 0提问于2013-09-17得票数 100
回答已采纳
1回答
角材料设计+自举
、、
有人能向我解释一下，在没有问题的角度应用程序中可以使用material design和bootstrap吗？
我想使用twitter-bootstrap的网格系统和material design的对话.
浏览 4提问于2017-09-25得票数 1
回答已采纳
我使用bootstrap grid。col sm-1太小，而col sm-2太大。我想要正中间的，col 1.5。但是当我这样做的时候，整个引导网格都崩溃了。有没有办法做这样的网格系统？
浏览 0提问于2016-03-22得票数 0
我是框架的新手，从那时起我就一直在使用react-bootstrap。
据我所知，Material-UI没有提供网格系统，所以我为我的应用程序提供了react-flexbox-grid。但是Material-UI的组件似乎并不考虑网格的大小。下面是我是如何使用它的：
import React from 'react'
import MenuContainer from '../containers/MenuContainer.jsx'
import AppBar from 'material-ui/AppBar'
import { Grid, R
浏览 3提问于2017-07-25得票数 0
回答已采纳
3回答
我已经看到了很多解决方案，可以让Bootstrap支持5列网格，但是没有一个正确的解释为什么它一开始不支持5列。
我认为，了解Bootstrap结构是如何工作的，而不是让它起作用。有人知道吗？
浏览 4提问于2016-06-19得票数 0
回答已采纳
我构建了一个react+flask应用程序，我想使用Material-UI我测试了按钮，它可以工作，我需要一个数据网格，一个表格，然后我得到这个错误：
./src/App.js
Module not found: Can't resolve '@material-ui/data-grid' in 'C:\spvreact\react-flask-app\src'
在控制台中，我得到了这个：
Uncaught Error: Cannot find module '@material-ui/data-grid'
at webpackMissi
浏览 2提问于2020-10-07得票数 6
我希望使用Twitter Bootstrap，但问题是，我需要的内容区域是960px宽，而不是只有940px，Twitter Bootstrap默认使用。
我不想使用响应式网格，而是固定的网格，因为99%的用户将通过计算机或iPad访问它，而不是手机。
如果我改变行和容器的像素宽度，最终得到一个960px的设计，会不会搞得一团糟？
我个人认为960px的宽度要好于940px的宽度，即使在1024px/768px的分辨率下，它仍然可以在没有水平滚动条的情况下显示良好。
还是我错过了什么？
浏览 1提问于2012-07-25得票数 3
回答已采纳
我已经找了好几个小时了，好像有很多人都有这个问题，但是没有人给出一个好的答案。
和/或他们的答案对我不起作用(例如，建议删除网格，我做了，仍然没有运气)。
我看到其他人在谈论Post的问题，您必须从文件中删除特定的语法(其中没有一个在我的文件中)，例如。
不幸的是，我对下一步该做什么完全不知所措。
从字面上说，我刚刚完成了一个React的多个月的构建，然后我开始部署，现在我被困在试图运行npm run build大约3个小时的</3
有人知道怎么解决这个问题吗？
**如果我从我的@import "~bootstrap/scss/bootstrap";文件中删除index.
浏览 5提问于2022-08-31得票数 0
1回答
我使用了来自BootStrap的网格模板，该网格的分页显示为附加的图像1。现在，当我更改浏览器的屏幕分辨率时，分页内容会根据附加的图像2分成两行，而不是单行。
但是一旦我刷新了页面，它就像图像3一样正确地加载了分页，但我希望在更改分辨率后立即显示该内容。
下面是使用React对该分页类变量ul = globalizationFactory.translate('STORMS_PAGER')，({className：'pagination pagination-sm'，role：'menubar'，'aria-label'：Reac
浏览 1提问于2015-04-21得票数 0
1回答
我使用npm i -g bootstrap安装了npm i -g bootstrap，并试图将bootstrap作为import "bootstrap/dist/css/bootstrap.css";包含在React app中。
然而，它正在抛出一个错误。
Failed to compile.
./src/index.js
Module not found: Can't resolve 'bootstrap/dist/css/bootstrap.css' in '/home/username/nodeProjects/react-app/src
浏览 0提问于2019-07-08得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
