加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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>

而且您可能需要禁用文本修饰:下划线样式以使下拉列表看起来更好.
例如,使用此css规则:

a.dropdown-toggle {
    text-decoration: none;
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读