reactjsreact-bootstrapbootstrap-5react-componentclassname

How can i delete width in react - bootstrap class?


I'm doing an internet-store, and i have a problem with top panel. I tried everything to fix it, but only when i change class row in dev tools i can get result.

row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

i need to delete width from this class, but i don't know how to do it. If u can help me, it will be cool.

oh, if i replace component for nothing change.

<Container>
  <Row className="mt-2">
    <Col md={3}>
      <TypeBar />
    </Col>
    <Col md={9} >
      <BrandBar />
      <DeviceList />
    </Col>
  </Row>
</Container>

const BrandBar = observer(() => {
  const {device} = useContext(Context);
  return (
    <Row  className="d-flex">
      {device.brands.map(brand => 
        <Card
        style={{cursor: 'pointer'}}
        key={brand.id}
        className='p-2 align-items-center'
        onClick={() => device.setSelectedBrand(brand)} 
        border={brand.id === device.selectedBrand.id ? 'danger' : 'light'} 
        >
          {brand.name}
        </Card>
        )}
    </Row>
  )
})

Solution

  • When using bootstrap's containers always follows the Container > Row > Col order.

    The class row>* is intended to select the cols, but instead is selecting your card.

    Try doing like so

    const BrandBar = observer(() => {
      const { device } = useContext(Context);
      return (
        //Add a Container here
        <Container>
          <Row className="d-flex">
            {device.brands.map((brand) => (
              //Add a Col here
              <Col>
                <Card
                  style={{ cursor: 'pointer' }}
                  key={brand.id}
                  className="p-2 align-items-center"
                  onClick={() => device.setSelectedBrand(brand)}
                  border={brand.id === device.selectedBrand.id ? 'danger' : 'light'}
                >
                  {brand.name}
                </Card>
              </Col>
            ))}
          </Row>
        </Container>
      );
    });