在我的例子中，Bootstrap @media不起作用( React)
在你的例子中，Bootstrap @media不起作用是因为在React中，Bootstrap的样式可能会被React的样式覆盖或者冲突。解决这个问题的方法有以下几种：
- 确保正确引入Bootstrap：首先要确保正确引入了Bootstrap的CSS文件。可以通过在HTML文件中使用
<link>标签引入Bootstrap的CSS文件，或者使用npm或yarn安装Bootstrap并在React组件中引入。 - 检查样式冲突：在React中，组件的样式是通过CSS模块化的方式来管理的，每个组件都有自己的独立样式。如果Bootstrap的样式与React组件的样式冲突，可以通过修改或调整组件的样式来解决冲突。
- 使用!important：如果Bootstrap的样式被其他样式覆盖，可以在需要的地方使用
!important来提高样式的优先级。但是要注意，过度使用!important可能导致样式难以维护和调试，应该谨慎使用。 - 自定义样式：如果Bootstrap提供的样式不满足需求，可以通过自定义样式来覆盖或扩展Bootstrap的样式。可以在React组件中定义自己的CSS样式，并使用CSS选择器来选择需要修改的元素。
- 使用响应式工具：Bootstrap提供了一些响应式工具类，可以根据不同的屏幕大小应用不同的样式。可以通过在元素上添加相应的类名来实现响应式布局和样式。
腾讯云相关产品推荐：
- 云服务器（CVM）：提供弹性计算能力，可根据业务需求灵活调整配置。
- 云数据库MySQL版（CDB）：提供高可用、可扩展的MySQL数据库服务。
- 云存储（COS）：提供安全可靠的对象存储服务，适用于存储和处理大规模非结构化数据。
- 人工智能机器学习平台（AI Lab）：提供丰富的人工智能算法和模型，支持开发和部署智能应用。
以上是一些可能适用的腾讯云产品，更详细的产品介绍和文档可以在腾讯云官网上找到。
相关·内容
我的MERN应用程序返回错误Module not found: Can't resolve 'react-bootstrap/Media'。 我导入了几个react-bootstrap模块，如下所示： import Image from "react-bootstrap/Image"
import Col from "react-bootstrap/Col"
import Media from "react-bootstrap/Media"
import Row from "react-bootstrap/Row
浏览 21提问于2021-10-22得票数 0
app.js
import React from 'react';
import './App.css'
import 'bootstrap/dist/css/bootstrap.css';
function App(props) {
return <h1>Hello, {props.name}</h1>;
}
export default App;
app.css
@media (min-width: 576px) {
body {
background-color: red;
}
浏览 11提问于2018-02-02得票数 0
1回答
我正在建立一个电子商务商店与django rest框架和nextjs作为前端。api有产品数据，我想在nextjs中显示产品数据。到目前为止，我只能显示字符串字符，但不能显示图像。这是我的index.js file.What我做错了吗？： import react from 'react';
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.min.css';
import Button from 'react-bootstrap/Button';
i
浏览 12提问于2021-03-20得票数 0
我对AWS的许多方面都很满意，但对Cognito则不太满意。我已经构建了作为Alexa技能的Lex风格的聊天机器人，但这是我第一次尝试将Lex聊天机器人集成到现有的网站中。这个网站是用www.codesandbox.io用React.js编写的，因为我刚开始学习React。我对C#很满意，但React对我来说是新的。如果下面的一些代码看起来没有多大用处，那只是因为我在测试不同的组件，函数和类等等。不管怎样，我在Lex中构建了一个简单的聊天机器人，并试图将它集成到这个React站点中，但每当我试图与聊天机器人聊天时，都会收到错误-错误:配置中缺少凭证(参见控制台了解详细信息)。有什么想法吗?我
浏览 20提问于2019-02-18得票数 2
我在我的应用程序中使用作为播放器。我是这样安装的：
npm install react-media-player --save
在index.html：
<script src="https://unpkg.com/react-media-player/dist/react-media-player.js"></script>
//(UMD library exposed as `ReactMediaPlayer`)
下面是将模块导入组件的代码：
import React, { Component } from 'react';
impo
浏览 4提问于2019-09-26得票数 0
回答已采纳
这是
但是，我的问题是
我尝试改变列的大小，并尝试像在Bootstrap中那样，将两个列类标签col-5和col-7分别放到保存图像和文本的两个媒体对象中，但似乎不起作用。
我的React组件是根据以下代码呈现的
render(){
const menu = this.state.dishes.map((dish) => {
return (
<Media>
<Media left middle>
<Medi
浏览 1提问于2021-06-05得票数 0
1回答
我刚刚开始探索、反应，并试图理解如何使用，如果安装在保龄球上，我只是遵循入门部分，但我并不真正理解应该如何工作。
这里有我的标记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="vie
浏览 3提问于2015-04-26得票数 3
回答已采纳
2回答
我正在学习反应，我正在建立一个网站来熟悉它。我在玩“使用去加密效果”npm包，我试图通过道具来设置它的值，但是总是抛出异常“无法读取未定义的属性”。
这是具有解加密包的我的子组件：
import * as React from "react";
import { useDencrypt } from "use-dencrypt-effect";
export function TypewriterBig(values) {
const { result, dencrypt } = useDencrypt();
React.useEffect((
浏览 3提问于2021-03-02得票数 0
回答已采纳
我的目标是在用户单击包装在onClick组件周围的div时调用Media事件处理程序，但我总是碰到墙壁。这是我的剧本：
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Media } from 'reactstrap';
var items = require('./feedData.json');
class App extends Component {
construct
浏览 1提问于2018-07-10得票数 1
回答已采纳
我有这样的反作用-引导代码示例：
import Media from 'react-bootstrap/Media';
const Product = (props) => {
return (
<div>
<Media>
<img
width={64}
height={64}
className="mr-3"
src={props.data.imageUrl}
浏览 6提问于2022-04-13得票数 0
回答已采纳
2回答
为什么我的状态数组重置为空？
、、、、
由于某些原因，只有我的消息状态数组的最后一个元素是呈现的。每当我调用addMessage并打印消息的当前状态时，总是打印出一个空数组。在我将新消息推送到状态数组之后，数组打印出一条消息。为什么我的消息状态不能正确保存并重置为空数组？ const ChatApp = () => {
const [messages, setMessages] = React.useState([]);
useEffect(() => {
ioClient.emit('join', { roomid: roomId });
ioClient.emit('
浏览 17提问于2020-07-26得票数 0
当使用react引导时，试图获得一个到collapseOnSelect的Navbar .好像不起作用？
这是我的进口品..。
import React, {Component} from 'react';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import {Co
浏览 0提问于2020-12-05得票数 2
回答已采纳
2回答
我在学习反应。我试图创建一个导航栏，并让我的选项卡打开组件作为新的页面使用浏览器路由器。(当我单击导航项时，什么都没有发生)我有website_header.js，如下所示：
import React, { Component } from 'react';
import {Navbar, Nav, NavItem } from 'react-bootstrap';
class Header extends Component {
render() {
return (
<Navbar inverse collapseOnSel
浏览 0提问于2017-05-20得票数 2
回答已采纳
1回答
如何在react / typescript中动态渲染/导入图像？
我在React中使用Typescript。
以下是我想要实现的目标。
但这是行不通的。它没有解析表达式{ 'assets/icons/' + media + '.svg'}。
<div className="medias">
MEDIAS.map((media) =>
(<img src={ 'assets/icons/' + media + '.svg'} />)
浏览 3提问于2021-04-19得票数 1
这是我的代码：
import React from "react";
import { BrowserRouter } from 'react-router-dom';
import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
const MiTabs = props => {
return (
<BrowserRouter>
<MDBNav className="nav-tabs mt-5">
{props.dat
浏览 3提问于2020-03-27得票数 0
因为我不想使用Bootstrap jquery或reactstrap，所以我尝试在react中实现原生bootstrap，在React中是bootstrap的一个普通javascript版本。
已尝试
pm install --save bootstrap.native
并加载了
import 'bootstrap.native/dist/bootstrap-native-v4.js';
但是它不起作用，我在index.html中的主体结束标记之前尝试了CDN
<script type="text/javascript" src="https://
浏览 2提问于2020-01-07得票数 1
2回答
导航栏的引导程序媒体查询不起作用
、、、、
我试图覆盖bootstrap的媒体查询，它看起来无论我做什么，都不愿意工作。
这是对我不起作用的代码
@media (max-width : 1200px) {
.navbar{
width: 90%;
}
}
浏览 0提问于2016-01-02得票数 0
3回答
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />,
浏览 0提问于2018-06-12得票数 1
我正在用React做一个帖子项目。每当我的主页在卡片视图中只包含一堆帖子时。如果我点击某张卡片，它会将我导航到该帖子，并提供一些详细信息。然而，在页面完全呈现之前，我仍然看到一些行或者可以说是“未完成”的元素。
我该如何解决这个问题呢？
下面是我的带有帖子的JS文件：
import React, { Component } from 'react'
import { Card } from "react-bootstrap";
import { Link } from "react-router-dom";
import './Po
浏览 20提问于2020-05-11得票数 1
回答已采纳
我正在尝试使用reactstrap显示工具提示。工具提示正确显示，但没有淡入/淡出过渡。使用检查器时，我注意到fade类不会应用于工具提示<div> ? 我按照https://www.npmjs.com/package/reactstrap#adding-bootstrap上的安装说明使用yarn将这些依赖项添加到我的package.json中 "bootstrap": "^4.1.1",
"react": "^16.7.0",
"react-dom": "^16.3.2",
浏览 7提问于2019-01-21得票数 0
回答已采纳
最近，我们正在尝试在react项目中使用Bootstrap table Next编辑器。在我们的例子中，用户使用IE来访问应用程序。日期编辑器在IE 11中不起作用，但它在chrome中工作得很好，即使故事书(日期编辑器)在IE中也不起作用。这是我们需要做的预期行为或任何特定的IE相关设置。有什么建议吗？ https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Cell%20Editing&selectedStory=Date%20Editor&a
浏览 31提问于2019-03-18得票数 0
我正在尝试在我的React应用程序中使用react-youtube，我想从youtube频道检索所有视频。情况是，它必须始终将所有视频显示为引用YouTube中的视频的缩略图，与YouTube中的频道中列出的相同。 你能给我一个如何做的解决方案吗？我已经阅读了文档和几十个线程，但仍然找不到解决方案。 我的页面代码如下所示。 import React from "react";
import { Button, Row, Col, ListGroup, Container, Card } from "react-bootstrap";
import YouTub
浏览 12提问于2020-12-03得票数 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
1回答
我有以下用于react的测试文件：
1 import React from 'react';
2 import ReactDOM from 'react-dom';
3 import { shallow, mount } from 'enzyme';
4 import { LinkContainer } from 'react-router-bootstrap';
5 import { App } from './App';
6
7 it('renders without cra
浏览 9提问于2016-10-20得票数 0
回答已采纳
嗨，得到了可靠的警报 react-bootstrap-table-next@4.0.3 requires underscore@1.9.1 The earliest fixed version is 1.12.1 - Dependabot alert 为了在package.json中修复这个问题，添加了underscore: 1.12.1，但问题并没有得到解决，因为在package.lock.json中仍然显示 "react-bootstrap-table-next": {
"version": "4.0.3",
浏览 17提问于2021-05-10得票数 2
鉴于CSS在Bootstrap 4中发生了变化的事实，有没有人可以建议更改布局页面，以便我可以使用该CSS进行呈现？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ReactASP.N
浏览 0提问于2018-09-16得票数 1
我不想重写我的引导管理模板来使用react-bootstrap库。我只想在react中使用我的引导组件。所有引导css的东西都可以在react中工作，但是所有的操作都不能。例如，bootstrap中的简单数据切换在react中不起作用。
我知道react有不受控制的组件。有没有人可以告诉我如何使用它来让bootstrap中的简单数据切换在react中工作。
<a href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>
<div data-toggle
浏览 5提问于2019-06-11得票数 0
2回答
JSX无法正确呈现
、、、
我的JSX不会在我的React网页上正确显示，而是我得到了以下输出： <div class='card'>NaNSasha<img src= NaN />Boddy Cane</div>. 组件： import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends Component{
state = {
string : '',
浏览 9提问于2020-08-27得票数 1
5回答
我从bootstrap站点下载这些文件。然后，我将文件移动到我的项目css和js文件夹中。我把它们联系起来了，但它不起作用。我用cdn试过了，它和cdn配合得很好。
下面是我的代码：
<link href="/css/bootstrap.min.css" media="all" rel="stylesheet">
浏览 0提问于2015-08-11得票数 2
在bootstrap react中导入css文件。
对于导航，将使用额外的header.css文件。在不带react的bootstrap中，我按如下方式嵌入文件：
<Nav class="navbar-abc-header navbar-default navbar-fixed-top">
在bootstrap react中，此条目不起作用。
render ( ) {
return (
<Navbar navbar-abc-header fixedTop>
...
浏览 7提问于2016-09-22得票数 1
我使用bootstrap中的Modal组件来实现中的React，我可以使用以下代码轻松实现Modal。
import React, {Component} from 'react';
import {BaseComponent} from 'BaseComponent';
import { Modal, Button } from 'react-bootstrap';
class InteractiveMap extends BaseComponent {
constructor(props) {
super(props);
浏览 1提问于2017-06-20得票数 0
回答已采纳
我正在为我的一个项目使用。问题是，我的ajax逻辑对我的前10个帖子(第一页)工作得很好，但是当我停止工作，无休止的分页加载更多的帖子时，我的ajax就不再对它们起作用了。我不确定我的。
我就是这样堆叠我的js的。
<script src="/site_media/endless_pagination/endless.js" type="text/javascript" charset="utf-8"></script>
<script src="/site_media/endless_pagination/
浏览 0提问于2012-10-21得票数 1
回答已采纳
我正在尝试在bootstrap中创建此布局：
我有iframe位置，但我在将ul对齐到它的右侧时遇到了一些问题。
这是我的iframe：
<iframe width="100%" height="100%" allowfullscreen frameborder="0" class="video-iframe" src]="'https://www.youtube.com/embed/' + youtube.videoId + '?rel=0' | safe" &g
浏览 2提问于2016-12-16得票数 0
1回答
我刚刚开始了一个新的react应用程序，并希望实现react bootstrap(通过运行npm install bootstrap引导)列、行和按钮标签不起作用，并且new引导文件夹存在于节点-模块文件夹中。
import React from 'react';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import {Button, Col} from 'react-bootstrap';
浏览 0提问于2020-07-09得票数 1
回答已采纳
我正在使用Ruby on Rails和React，并且我正在部署到Heroku。我已经在here上了，但是回复对我没有任何帮助。在我的application.html.erb文件中 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-t
浏览 25提问于2020-01-17得票数 2
回答已采纳
在我的styles.scss中，我导入了bootstrap变量，并对其进行了测试。 @import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/mixins/_breakpoints';
$grid-breakpoints: (
sm: 768px,
md: 768px,
lg: 1024px
);
$container-min-widths: (
sm
浏览 31提问于2019-01-29得票数 0
回答已采纳
我最近一直致力于在react引导中创建一个博客，虽然我的代码的几乎每个部分都运行得很好，但我无法准确地指出我为什么会出错；我已经将其缩小到了这段代码中。如果编译器无法在'Media.Body'中读取未定义类型的属性，则引发类型错误。如何修复此问题或使Media.Body组件中的类型返回？任何帮助都将不胜感激；谢谢！
import { Row, Col, Image, Card, Media } from "react-bootstrap";
<Media className="mb-4 admin-intro">
浏览 8提问于2022-07-09得票数 0
我的React应用程序是使用react-bootstrap的旋转木马。这种旋转木马在Chrome、Firefox、Safari、Edge上运行良好，但在上不起作用。
问题:旋转木马将在第一次切换，然后冻结。它不再自动切换，您不能单击指示符来更改页面。。
我已经在网上和这里搜索过了，无法为我的具体案例找到一个帖子/解决方案。
我的package.json显示了我正在使用的React-Bootstrap上的哪个版本
"dependencies": {
"react": "~16.11.0",
"react-app-polyfi
浏览 0提问于2020-01-27得票数 0
回答已采纳
2回答
未定义反应
、、、
我刚开始玩，但我似乎遇到了一些问题。在下面的代码中，每当我被路由到react示例页面时，我注意到在浏览器开发人员控制台中，它会说"React是未定义的“。它指的是这一行：
变量react_example = React.createClass({
它位于react_example.js.jsx文件中(参见下面)。
Gemfile
#... as well as other gems...
gem 'nokogiri'
gem 'react-rails' #<------ React
gem 'less-rails'
gem '
浏览 2提问于2014-07-26得票数 5
回答已采纳
嗨，我一直在绞尽脑汁想我到底做错了什么。在本地，格式是正确的，但当我将其推送到Netlify时，Tailwindcss决定不工作。我清除错误了吗？我的dist和src文件夹中有一个顺风css文件。 ? package.json {
"name": "bgg_version_3",
"keywords": [
"design, graphic design, art, illustration, web design, Virginia, Massachusetts, Boston, Newport News"
浏览 40提问于2021-08-19得票数 0
2回答
在文件或链接中包含html中的引导程序的最佳方法是什么？
link href="css/bootstrap.css" rel="stylesheet" media="screen"
link href="css/bootstrap.min.css" rel="stylesheet" media="screen"
或
link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bo
浏览 0提问于2014-08-31得票数 1
回答已采纳
我正在使用React Bootstrap Table，我希望在水平滚动上有一个事件这就是我所做的，它似乎不起作用 useEffect(() => {
let control = document.querySelector('.react-bootstrap-table');
control.addEventListener('scroll', handleScroll, { passive: true })
}, []);
function handleScroll() {
console.log("hell
浏览 16提问于2020-10-08得票数 0
回答已采纳
我无法在dangerouslySetInnerHTML中动态地AJAX加载HTML格式数据(如下面所述)(也就是说，它在DOM中设置为相同的字符串，而不是编译)。请注意，对于AJAX调用，我正在使用axios插件。当我尝试在dangerouslySetInnerHTML中静态地提供相同的HTML数据时，它是完美的。我不知道那是怎么回事。
[{id: 1, image: "assets/img/news-sm.png", content: "<p>சிறுவனே!</p>"}]
我的反应性组件代码是
impo
浏览 3提问于2017-06-11得票数 0
我试图将输入添加到顶级模块中，基本上我希望
import DropDownButton from 'bootstrap-dropdown-button'
才能正确打字。在typings/bootstrap-dropdown-button/index.d.ts内部，我有以下内容
import {Component} from 'react';
declare module 'bootstrap-dropdown-button' {
//var DropdownButton: any;
//export default Dropdo
浏览 1提问于2017-05-30得票数 1
回答已采纳
1回答
我不知道我在哪里出错了。我的代码中有什么地方不正确？我有一个子页面的网站如下。响应式设计不起作用。这是否与HTML/CSS代码中的任何错误有关，或者我应该使用任何特定的方法在bootstrap中进行响应式设计，而不是媒体查询？一般来说，行和列有一个问题--我不能相应地改变边距和字体大小。这可能与django继承机制有关吗？ {% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bo
浏览 24提问于2020-09-02得票数 0
嗨，我已经做了几个小时了，但还是没弄明白。
代码在JSFiddle上运行得很好，但在我的网站上就不行了。
这是JSFiddle链接：
我还添加了Jquery和JqueryUI的链接。
<script src="/media/js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="/media/js/jquery-ui.js" type="text/javascript"></script>
<link
浏览 2提问于2014-02-21得票数 0
我需要帮助让我的进度条从react-bootstrap显示出来。我已经从yarn安装了bootstrap和react-bootstrap，并将两个文件和组件导入到我的react应用程序中。不知怎么的，它对我还是不起作用。有什么建议吗
Dashboard.js
import React,{useEffect,useState} from 'react';
import styled from 'styled-components'
import Bootstrap from 'bootstrap/dist/css/bootstrap.min.css'
浏览 0提问于2020-01-29得票数 2
可能是一个新手问题(从react开始)，但我无法在新启动的react应用程序中更改主题颜色。
我读了一些答案，但不幸的是，它们对我不起作用。
我有以下入口点：
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './components/App';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
import '
浏览 0提问于2018-08-20得票数 8
回答已采纳
5回答
对不起，如果这是一个重复的问题。我似乎解决不了这个问题，也找不到答案。
本质上，我想显示一个图像，因此它响应调整取决于屏幕大小。我用的是React Bootstrap示例，它只是不起作用。下面是我正在使用的代码，这里有一个指向示例的链接。
import React from 'react';
import {ResponsiveEmbed, Image} from 'react-bootstrap';
export default React.createClass ( {
render() {
return (
浏览 0提问于2017-05-16得票数 5
回答已采纳
2回答
三列响应式
、、、
我不能使用bootstrap来完成这个任务。我使用reactjs和radium (风格像react-native)，我尝试使用flexbox，但我可以使用CSS和媒体查询。
我有一个3列的布局。当从桌面访问时，它显示如下：
--------------------------
| column 1 | |
------------| column 2 |
| column 3 | |
--------------------------
列1和列3的高度将与列2相同。
我希望在手机/平板电脑/调整大小的浏览器中查看时是这样的：
-------
浏览 0提问于2018-07-10得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
