Question

在经典的引导程序中，这种结构很简单：

<div class="panel panel-danger">
  <div class="panel-heading">
    Some HTML including a drop-down.
  </div>
  <div class="panel-body">
    Panel body, lots of HTML here
  </div>
  <div class="panel-footer">
    <button class="btn btn-default">Click me</button>
  </div>
</div>

在react-bootstrap实现中，似乎没有办法在面板页眉或页脚中包含更多的html？

Answer 1

试试这个

  <Panel 
    header="Some HTML including a drop-down." 
    footer={<Button> Click me</Button>} 
    bsStyle="danger"
  >
    Panel body, lots of HTML here
  </Panel>

您可以使用bootstrap-react document

中的其他道具

Answer 2

根据react-bootstrap panel documentation：

<Panel>
    <Panel.Heading>Panel heading</Panel.Heading>
    <Panel.Body>Panel content</Panel.Body>
    <Panel.Footer>Panel footer</Panel.Footer>
</Panel>

如何在react-bootstrap中添加面板页眉和页脚内的组件？

2 个答案: