React bootstrap 使用按钮名称和图标自定义按钮

Question

如何根据按钮名称动态调整按钮高度？

看，名字被剪掉了。到目前为止我已经做了如下：

index.css

.btn-product {
    background-color: white;
    color: black;
    border-radius: 25px;
    border: 2px solid black;
    text-align: left;
    position: relative;
    display: inline-block;
    overflow: hidden;
    text-overflow:ellipsis;
    margin-top: 4px;
    width: 200px;
    height: 50px;
}

index.js

return (
    <div>
        <Button  target="_blank" className='btn-product' block  variant="secondary" href='/sign-up'>
            <span style={{position: 'absolute', width:'80%'}} >Button 1 with a long name</span>
            <BiChevronRight size={30} style={{color: 'orange',  float: 'right'}} />
        </Button>
        <Button  target="_blank" className='btn-product' block  variant="secondary" href='/login'>
            <span style={{position: 'absolute', width:'80%'}} >Button 2 with a long name</span>
            <BiChevronRight size={30} style={{color: 'orange',  float: 'right'}} />
        </Button>
    </div>
)

要求如下：

按钮名称应左对齐
'>' 图标应右对齐
点击按钮，新的浏览器选项卡打开 link。
按钮应该像图片一样圆润。
如果名称太长，不应裁剪，而是应调整按钮高度。

只有5号没有完成。你能帮我吗？ 如何动态调整按钮高度？

Answer 1

将显示属性更改为 inline-flex 并将高度更改为 min-height
从 span 中删除 absolute 并从 Chevron 中删除 float
添加 flex-flow: row nowrap, align-items: center 以及 justify-content: space-between 到按钮。

.button { 
    display: inline-flex; 
    flex-flow: row nowrap; 
    min-height: 50px; // allows it to grow if the name is longer.
    align-items: center; 
    justify-content: space-between; 
}

React bootstrap 使用按钮名称和图标自定义按钮

React bootstrap Button customization with a button name and a icon

html

css

reactjs

react-bootstrap

bootstrap-4