React Bootstrap <Button> 组件循环

Question

有这样一个问题，但答案不是很清楚，我没有足够的“分”来评论它。

我阅读了https://react-bootstrap.github.io/components/buttons/ 和其他一些文档，但找不到我的答案。

我以这篇文章为指导：https://www.pluralsight.com/guides/how-to-position-react-bootstrap-popover

import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
    
    .
    .
    .

render() {
  const popover = (
    <Popover id="popover-basic">
      <Popover.Title as="h3">Popover title</Popover.Title>
      <Popover.Content>
        Popover content <strong>some strong content</strong> Normal content again
      </Popover.Content>
    </Popover>
  );
  return (
    <div className='toggle container '>
      <div className='form-row justify-content-center'>
        <div className='col-6'>
        <section class='inline-block'>
          <span class="badge badge-pill badge-primary ml-2">1</span>
          <h3>
          Choose System Type:
          </h3>
          <div id="element1">
          <OverlayTrigger trigger="hover" placement="right" overlay={popover}>
            <Button variant="outline-primary" circle><i class="fas fa-question"></i></Button>
         </OverlayTrigger>



              
          </div>
        </section>

      </div>
    </div>
  </div>

我希望我的弹出按钮是一个圆圈，但我找不到有关如何做到这一点的文档。

有人可以明确帮助我使用吗？也许还有别的？例子有很大帮助。这是它现在的截图...

Answer 1

您可以将className="rounded-circle" 设置为您的按钮组件，它将是圆形。 有关类似边界类的更多信息： Bootstrap documentation