css - 使用 reactstrap 进行广泛的下拉
问题描述
我试图做一个广泛的下拉,在其中显示一个登录表单,我正在尝试 reactstrap:
这是代码:
import React, { useState } from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
const Example = (props) => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState);
return (
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem>Some Action</DropdownItem>
<DropdownItem disabled>Action (disabled)</DropdownItem>
<DropdownItem divider />
<DropdownItem>Foo Action</DropdownItem>
<DropdownItem>Bar Action</DropdownItem>
<DropdownItem>Quo Action</DropdownItem>
</DropdownMenu>
</Dropdown>
);
}
export default Example;
我希望下拉菜单有 500 像素宽,我该怎么做呢?有可能吗?
解决方案
我认为您可以使用 reactStrap 类来做到这一点,您可以尝试以下 css as
.dropdown-menu {
width: 500px;
}
希望能帮助到你
推荐阅读
- pip - 这些包与需求文件中的哈希不匹配
- python-3.x - PySpark add column if date in range by quarter
- flutter - 如果 Dart 上的日期为空,如何处理日期?
- python - Django/Wagtail - 通过多个父页面优化页面查询集的最有效方法
- css - CSS object-fit cover is stretching a particular image in Chrome on Mac
- javascript - 如何在 Firebase Firestore 的数组中推送用户对象
- c# - 如何在 c# 中基于构造函数方法创建数组?
- oracle - 在从类型对象插入之前,plsql 在表中创建一个 upsert/merge 逻辑
- java - 游戏返回执行的命令
- reactjs - API 调用后无法让 Circles 在 react-leaflet 地图上呈现