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

问题描述

我正在react-bootstrap中练习网格布局。但是当我试图清除容器液体的填充物时卡住了。我们可以通过覆盖容器流体类并将填充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中专门选择该容器？

解决方法

我已经在容器液中添加了className="p-0"，并且效果很好。如果要使用常规引导程序，则可以通过在className中指定类来使用它。我之所以采用内联样式的主要原因是，内联样式比内部样式和外部样式具有更高的特异性。

在特异性方面，它就像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。在选择元素!important的地方使用specifically。例如

div p span{
 color: red !important;
}

span{
color: blue;
}

div p span中的文本将为红色，而span中的文本将为蓝色（此处，由于div p span的特殊性，跨度的CSS未被覆盖）。

从行中删除 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>

react-bootstrap reactjs reactjs