如何解决删除 ButtonGroup 的 Bootstrap 样式
我想知道是否有办法删除 <ButtonGroup>
给出的默认样式/对齐方式。我正在使用 React 和 React Bootstrap 的 <Row>
、<Col>
和 <Form.Row>
,并且我已经使用 <Col>
进行了样式和对齐。 <ButtonGroup>
完全覆盖了这一点,我无法在线进行任何操作。
这是我的图片:
我只在左侧应用了 <ButtonGroup
>,然后才应用到所有按钮,但它应该看起来仍然像其他按钮。
代码:
<Col sm={6} xs={6}>
<Col style={{ paddingLeft: "0px" }}>
{" "}
<Form.Label className="button-question">
Type of insurance?
</Form.Label>
</Col>
<ButtonGroup>
<Row>
<Col sm={4} md={3}>
<div>
<Button
type="button"
className="orange-btn btn-primary"
>
<i className="fas fa-umbrella fa-2x"></i>
</Button>
</div>
<Form.Label className="button-label">
Level Term
</Form.Label>
</Col>
<Col
sm={4}
md={3}
style={{ textAlign: "center" }}
>
<div>
<Button type="button" className="orange-btn">
<i className="fas fa-home fa-2x"></i>
</Button>
</div>
<Form.Label className="button-label">
Mortgage
</Form.Label>
</Col>
<Col
sm={4}
md={3}
style={{ textAlign: "center" }}
>
<div>
<Button type="button" className="orange-btn">
<i className="fas fa-heart fa-2x"></i>
</Button>
</div>
<Form.Label className="button-label">
Whole of Life
</Form.Label>
</Col>
</Row>
</ButtonGroup>
</Col>
CSS:
.orange-btn {
width: 73.98px !important;
height: 60.71px !important;
cursor: pointer !important;
color: #FE9900 !important;
background-color: #ffffff !important;
border: 1px solid transparent !important;
border-radius: 10px !important;
border-color: #FE9900 !important;
Box-shadow: 2px 7px 6px 0 rgba(0,0.158) !important;
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.orange-btn:hover,.orange-btn:focus {
color: #ffffff !important;
background-color: #E89416 !important;
border-color: #E89416 !important;
border-radius: 10px !important;
}
.orange-btn:focus {
outline: 0 !important;
Box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25) !important;
}
.orange-btn:active {
border-color: #FE9900 !important;
background-color: #FE9900 !important;
border: 1px solid transparent !important;
}
.button-label {
font-size: 12px;
text-align: center;
}
有人知道这是否可能吗?
解决方法
检查按钮组样式并为按钮组内联样式提供默认样式属性
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。