css - 关闭按钮在引导反应弹出窗口中未垂直居中

Question

我正在尝试一个简单的弹出框并添加了一个关闭按钮，代码如下：

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

const popover = (
    <Popover className="mt-2" id="popover-basic">
        <Popover.Title as="h3">
            Popover right
            <button type="button" class="close" style={{ width: '20', height: '20'}} aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </Popover.Title>
        <Popover.Content>
            And here's some <strong>amazing</strong> content. It's very engaging.
            right?
        </Popover.Content>
    </Popover>
);


const PopoverTest = () => {
    return (
        <div className="text-center">
            {/* Wrap in the trigger to get the target */}
            <OverlayTrigger trigger="click" placement="bottom" overlay={popover}>
                <Button className="mt-3 text-center">Click me to see</Button>
            </OverlayTrigger>
        </div>
        
    );
};

export default PopoverTest;

但是按钮不是垂直居中的：

我怎样才能解决这个问题？

标签： cssreactjstwitter-bootstrapreact-bootstrap

Answer 1

移除mt-3Button 组件中的 className。它在顶部增加了 1rem 的边距。如果您仍想在其容器或页面的中心对齐按钮，请考虑设置OverlayTrigger用 flex 包装的 div 的样式。