问题标签 [reactstrap]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
129 浏览

reactjs - 折叠导航栏,然后 576px

我使用下面的导航栏,我希望它在 768px 处折叠。我尝试使用 css,但是如果我将任何显示属性强制到<Collapse />.

你如何在 reactstrap 中解决这个问题?如果您认为我应该考虑其他方法,我会全力以赴。这是关于该项目的 github 页面,您可以看到导航栏如何折叠以及 reactstrap 如何将 css 应用到"navbar-collapse"576px 之前,以及引导程序如何在 576pxdisplay: flex!important;之后应用 css。如果我将显示属性强制到"collapse"or上"navbar-collapse"。我覆盖了 css reactsrap 应用,所以我破坏了模块。我不想重写 bootstrap.min.css,我正在寻找替代方案。 来自网站的 githubPage

谢谢!

0 投票
1 回答
12390 浏览

twitter-bootstrap - 带引导反应的全高柱

我正在使用 react 和 reactstrap 创建一些模板。这就是我的代码现在的样子:

现在我得到了全高(可自动调整的列),但我在我的 CS 中使用了这段 JS:

我不喜欢在 CSS 中使用 JS,但我不确定如何在 reactstrap 库中执行此操作。

有任何想法吗?

0 投票
1 回答
41 浏览

bootstrap-4 - Bootstrap V4 Dropdown 需要哪些库?

我已经包含了来自https://reactstrap.github.io/components/dropdowns/bootstrap.js, reactstrap, jquery, tether 的基本示例仍然不起作用

0 投票
1 回答
249 浏览

javascript - 如何在容器特定的 scss 中包含 Bootstrap?

我正在努力升级到最新版本的reactstrap和 Bootstrap,我曾经有:我的 package.json 中的 reactstrap 和我的 client/src/styles/bootstrap 目录中下载的 bootstrap SCSS。

我现在在我的 package.json 中有:

对于我的容器和组件特定的 SCSS 文件,这曾经可以工作:

主页.jsx:

主页.scss

新的 reactstrap 和 Bootstrap 不再提供这些 @import 文件。如何导入引导项目@import "../bootstrap/mixins/breakpoints";?还是我做错了?

0 投票
2 回答
4509 浏览

node.js - 如何在 React 应用程序中自定义 Bootstrap 变量?

我正在使用 facebook 的create-react-app。我已经完成了将 SASS 添加到我的应用程序的所有说明,现在我正在尝试添加 Bootstrap 并自定义主题。我已经能够添加引导程序,但变量的自定义不起作用。这是我的设置:

包.json

在我的 React 布局容器中:

Bootstrap 工作正常,但自定义/覆盖没有效果。

custom_bootstrap.scss:

初级仍然是蓝色的。我在这里做错了什么?

更新

主布局.jsx

索引.scss

如果我删除@import 'custom_bootstrap';引导程序编译成功。

如果我将其添加回来并更新以下内容:

_custom_bootstrap.scss

我收到如下编译错误:

0 投票
0 回答
430 浏览

javascript - 使用示例代码,整个 Reactstrap 导航栏未对齐/反转

在尝试为我的站点设置导航栏组件时,我第一次关注 reactstrap 示例,它看起来与显示的输出完全不同。这是它的样子:

在此处输入图像描述

我期待它看起来像(样机):

在此处输入图像描述

我在这里到底做错了什么?

这是我的代码:

和:

0 投票
2 回答
2222 浏览

reactjs - 如何将解除警报设置为仅显示一次

我尝试找到在用户进入页面时第一次显示解除警报的方法,然后当用户再次单击该页面时,它将不再显示该警报。

我使用这个网站的代码:https ://reactstrap.github.io/components/alerts/

我的代码:

大家知道怎么查吗?请给我建议。

谢谢

0 投票
2 回答
404 浏览

css - 使用 Reactstrap:无法将 CSS 样式应用于 CarouselItem 的图像以及如何使用 div 而不是图像

我在使用 react.js 的生产网站中使用 reactstrap。

我想知道是否有人可以帮助我实施 reactstrap 轮播。我正在尝试将 CSS 应用于 CarouselItem 的图像本身,但它没有被应用。对于 CarouselItem 有一个 src 的道具,但由于未使用完整的 img 标签,我不确定如何将 CSS 应用于该标签。我想知道是否有人可以帮助我?

我还在使用 Carousel 构建一个带有文本但没有图像用于新闻提要的滑块,我不确定如何使用文本 div 而不是 img 设置 CarouselItems?

我真的很感谢这两个问题的帮助。新的 reactstrap 和惊人的资源,因此试图在生产中实现它。

谢谢你。

0 投票
1 回答
1431 浏览

reactjs - Reactstrap Modal 不淡入但淡出

我正在构建一个带有 Reactstrap 登录链接的标题。当用户单击登录链接时,应该会出现一个模式,显示登录的不同选项。这是我的代码:

我遇到的问题是模态仅淡出但不会淡入。默认情况下,模态组件的淡入淡出道具设置为true。我尝试使用fade={true}或仅使用速记手动设置它fade。它没有解决问题。我尝试设置 modalTransition 和 backgroundTransition 道具来触发淡入淡出效果。它仍然没有工作。有人可以帮忙解决这个问题吗?

0 投票
12 回答
20373 浏览

reactjs - ¿如何使用 reactstrap 在 DropdownItem 中添加链接?

如何使用 reactstrap 在 DropdownItem 中添加链接?

我想在下拉菜单中添加一个链接,但是如何添加它,因为在 reactstrap 文档中我找不到任何相关内容。

它以这种方式显示,但我无法添加链接

在此处输入图像描述