我正在将 react-bootstrap/Tabs 用于包含内容的动态选项卡。 如果 Tabs 超过 6 个，我想添加水平滚动

Question

I am using react-bootstrap/Tabs for dynamic Tabs with content. If Tabs are more than 6, then my requirement is to add horizontal scroll. Tried adding:

overflow-x: scroll; 
overflow-y: hidden;

It is adding a empty horizontal scrollbar.

to get horizontal scrollbar for tabs.

Answer 1

I am using this

Tabcontainer and navs as Tab

give style to Navs tag overflow:'auto', display:'flex, flex-wrap:nowrap

    function BasicExample() {
  return (
    <>
      <Tab.Container defaultActiveKey={1} mountOnEnter={true} onSelect={(e) => setActive({ [e]: activeTabClasses })}>
      <Nav variant="tabs" style={{overflow:'auto'}} className=" d-flex flex-nowrap flex-row mt-2" justify>
        <Nav.Item className='d-flex  flex-column'>
          <Nav.Link eventKey={1} >Inspections</Nav.Link>
        </Nav.Item>
        <Nav.Item className='d-flex  flex-column'>
          <Nav.Link eventKey={2}>Accessories</Nav.Link>
        </Nav.Item>
        <Nav.Item className='d-flex  flex-column'>
          <Nav.Link eventKey={3}>People</Nav.Link>
        </Nav.Item>
        <Nav.Item className='d-flex  flex-column'>
          <Nav.Link eventKey={4}>Activity</Nav.Link>
        </Nav.Item>
        <Nav.Item className='d-flex  flex-column'>
          <Nav.Link eventKey={5}>Documents</Nav.Link>
        </Nav.Item>
      </Nav>
      <Tab.Content className='d-flex flex-column flex-grow-1'>
        <Tab.Pane eventKey={1} className={`d-flex flex-column flex-grow-1`}>
          <div>Inspections</div>
        </Tab.Pane>
        <Tab.Pane eventKey={2} className={`d-flex flex-column flex-grow-1`}>
          <div>Inspections</div>
        </Tab.Pane>
        <Tab.Pane eventKey={3} className={`d-flex flex-column flex-grow-1`}>
          <div>Inspections</div>
        </Tab.Pane>
        <Tab.Pane eventKey={4} className={`d-flex flex-column flex-grow-1`}>
          <div>Inspections</div>
        </Tab.Pane>
        <Tab.Pane eventKey={5} className={`d-flex flex-column flex-grow-1`}>
          <div>Inspections</div>
        </Tab.Pane>
      </Tab.Content>
    </Tab.Container>
    </>
  );
}

export default BasicExample;