在 Reactjs 中的 React-Bootstrap 中专门删除容器流体填充

Question

我正在 react-bootstrap 中练习网格布局。但是当我试图去除容器流体的填充物时卡住了。我们可以通过覆盖 container-fluid 类并将填充 0 设为重要来在常规引导程序中做到这一点。

.container-fluid {
  padding: 0 !important;
}

我尝试过这种方式，效果很好，但我不想使用!important，因为以后我的应用程序中可能会有很多容器流体。

<Container fluid>
      <Row noGutters>
        <Col lg={6} md={6} xs={12}>
          <div style={{ background: "red" }}>hello i am subrato</div>
        </Col>
        <Col lg={6} md={6} xs={12}>
          <div style={{ background: "blue" }}>I new to react-bootstrap</div>
        </Col>
      </Row>
      <Row noGutters>
        <Col xs={12} md={8}>
          <div style={{ background: "red" }}>hello i am subrato</div>
        </Col>
        <Col xs={12} md={4}>
          <div style={{ background: "blue" }}>I new to react-bootstrap</div>
        </Col>
      </Row>
</Container>

在这里查看我的输出

如何在 react-bootstrap 中专门选择该容器？

Answer 1

我在容器液中添加了className="p-0"，效果很好。如果我们想使用常规引导程序，那么我们可以通过在className 中指定类来使用它。 我使用 inline-style 的主要原因是 Inline-style 比内部样式和外部样式具有更高的特异性。

就特异性而言，就像inline-style > internal style > external style。

<Container fluid={true} className="p-0">
      <Row noGutters>
        <Col lg={6} md={6} xs={12}>
          <div style={{ background: "red" }}>hello i am subrato</div>
        </Col>
        <Col lg={6} md={6} xs={12}>
          <div style={{ background: "blue" }}>I new to react-bootstrap</div>
        </Col>
      </Row>
</Container>

避免在您的应用程序中使用!important。在您选择元素specifically 的地方使用!important。例如

div p span{
 color: red !important;
}

span{
color: blue;
}

div p span 中的文本将为红色，span 中的文本为蓝色（此处跨度的 CSS 没有被覆盖，因为 div p span 的特殊性）。

Answer 2

从行中移除 noGutters 属性

<Container fluid>
      <Row>
        <Col lg={6} md={6} xs={12}>
          <div style={{ background: "red" }}>hello i am subrato</div>
        </Col>
        <Col lg={6} md={6} xs={12}>
          <div style={{ background: "blue" }}>I new to react-bootstrap</div>
        </Col>
      </Row>
</Container>