提问人：Seema 提问时间：12/29/2022 最后编辑：Seema 更新时间：12/30/2022 访问量：694
我正在使用 react-bootstrap/Tabs 作为带有内容的动态选项卡。如果选项卡超过 6，我希望添加水平滚动
I am using react-bootstrap/Tabs for dynamic Tabs with content. If Tabs are more than 6, i want horizontal scroll to be added
问：
import Tab from 'react-bootstrap/Tab'; import Tabs from 'react-bootstrap/Tabs'; import Sonnet from '../../components/Sonnet'; function UncontrolledExample() { return ( <Tabs defaultActiveKey="profile" id="uncontrolled-tab-example" className="mb-3" > <Tab eventKey="home" title="Home"> </Tab> <Tab eventKey="profile" title="Profile"> </Tab> <Tab eventKey="contact" title="Contact" disabled> </Tab> </Tabs> ); } export default UncontrolledExample;ul.mb-3.nav.nav-tabs { overflow-y: hidden; overflow-x: scroll; max-width: 40%; }import Tab from 'react-bootstrap/Tab'; import Tabs from 'react-bootstrap/Tabs'; import Sonnet from '../../components/Sonnet'; function UncontrolledExample() { return ( <Tabs defaultActiveKey="profile" id="uncontrolled-tab-example" className="mb-3" > <Tab eventKey="home" title="Home"> </Tab> <Tab eventKey="profile" title="Profile"> </Tab> <Tab eventKey="contact" title="Contact" disabled> </Tab> </Tabs> ); } export default UncontrolledExample;我正在使用 react-bootstrap/Tabs 作为带有内容的动态选项卡。 如果选项卡超过 6，那么我的要求是添加水平滚动。 尝试添加：
overflow-x: scroll;
overflow-y: hidden;
它正在添加一个空的水平滚动条。
获取选项卡的水平滚动条。
答：
0赞
NAZIR HUSSAIN
12/29/2022
#1
我正在使用这个
Tabcontainer 和 navs 作为 Tab
为 Navs 标签赋予样式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;
评论