删除 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;
}

有人知道这是否可能吗？

解决方法

检查按钮组样式并为按钮组内联样式提供默认样式属性