reactjs – 如何在ReactBootstrap中将Glyphicon添加到NavDropdow
发布时间:2020-12-15 20:14:10 所属栏目:百科 来源:网络整理
导读:我正在尝试将一个glyphicon添加到React Bootstrap中的NavDropdown. 我知道您可以将其添加到正常的Dropdown中,如文档中所述. Dropdown id="dropdown-custom-1" Dropdown.Toggle Glyphicon glyph="star" / Pow! Zoom! /Dropdown.Toggle Dropdown.Menu MenuItem
我正在尝试将一个glyphicon添加到React Bootstrap中的NavDropdown.
我知道您可以将其添加到正常的Dropdown中,如文档中所述. <Dropdown id="dropdown-custom-1"> <Dropdown.Toggle> <Glyphicon glyph="star" /> Pow! Zoom! </Dropdown.Toggle> <Dropdown.Menu > <MenuItem eventKey="1">Action</MenuItem> <MenuItem eventKey="2">Another action</MenuItem> </Dropdown.Menu> </Dropdown> 我尝试过的: 1.不起作用: <NavDropdown eventKey={3} id="basic-nav-dropdown"> <NavDropdown.Toggle> <Glyphicon glyph="star" /> Pow! Zoom! </NavDropdown.Toggle> <MenuItem eventKey={3.1}>Action</MenuItem> <MenuItem eventKey={3.2}>Another action</MenuItem> </NavDropdown> 2.不起作用: <NavDropdown eventKey={3} title={<Glyphicon glyph="star" /> Dropdown} id="basic-nav-dropdown"> <MenuItem eventKey={3.1}>Action</MenuItem> <MenuItem eventKey={3.2}>Another action</MenuItem> </NavDropdown> 3.工作但插入符号与文本不一致,它出现在一个新行中: <NavDropdown eventKey={3} title={<div><Glyphicon glyph="star" /> Dropdown </div>} id="basic-nav-dropdown"> <MenuItem eventKey={3.1}>Action</MenuItem> <MenuItem eventKey={3.2}>Another action</MenuItem> </NavDropdown> 解决方法
您可以尝试通过< Glyphicon />传递标题.像这样的组件:
render() { const navDropdownTitle = (<Glyphicon glyph="star"> Dropdown </Glyphicon>); return ( <NavDropdown title={navDropdownTitle} eventKey={3} id="basic-nav-dropdown"> <MenuItem eventKey={3.1}>Action</MenuItem> <MenuItem eventKey={3.2}>Another action</MenuItem> </NavDropdown> ) } (更新)或者我们可以使用您的方法,但对div风格的小修复.在这种情况下,字体样式不会分解. <NavDropdown eventKey={3} title={<div style={{display: "inline-block"}}><Glyphicon glyph="star" /> Dropdown </div>} id="basic-nav-dropdown"> <MenuItem eventKey={3.1}>Action</MenuItem> <MenuItem eventKey={3.2}>Another action</MenuItem> </NavDropdown> 而且您可能需要禁用文本修饰:下划线样式以使下拉列表看起来更好. a.dropdown-toggle { text-decoration: none; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |