How can i delete width in react - bootstrap class?

user2qCi1 0
Viewed 17

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>
  )
})
react-component classname react-bootstrap bootstrap-5 reactjs
1 Answers

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>
  );
});
Tiagocf20
Related