Question

我试图在React Bootstrap中向NavDropdown添加一个glyphicon。我知道您可以将其添加到正常的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>

Answer 1

您可以尝试通过<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>

您可能需要禁用text-decoration: underline样式才能使下拉列表看起来更好。例如，使用此css规则：

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

如何在ReactBootstrap中将Glyphicon添加到NavDropdown

1 个答案: