时间戳

首页 > 解决方案 > 标签未在较小的屏幕上显示

react-bootstrap - 标签未在较小的屏幕上显示

问题描述

我正在构建一个 React-Bootstrap 页面，我希望在大屏幕上使用 3 列布局，但在较小的屏幕上，我想将其转移到基于所选选项卡一次显示一列的选项卡上。在较大的屏幕上，我确实得到了想要的结果，但在较小的屏幕上，我只能看到我的选项卡和内容列，而其他列保持隐藏。

我在各种 className 修饰符上尝试了几次尝试，但它们似乎都不能正常工作。

class HomePage extends Component {
  render() {
    return (
      <Container id='homepage_container' fluid='true'>
        <ul className='nav nav-tabs d-md-none' role='tablist'>
          <li className='nav-item'>
            <a className='nav-link active' href='#controls-col' aria-controls='controls-col' data-toggle='tab' role='tab'>Controls</a>
          </li>
          <li className='nav-item'>
            <a className='nav-link' href='#content-col' aria-controls='content-col' data-toggle='tab' role='tab'>Content</a>
          </li>
          <li className='nav-item'>
            <a className='nav-link' href='#related-content-col' aria-controls='related-content-col' data-toggle='tab' role='tab'>Related</a>
          </li>
        </ul>

        <Row id='homepage_main_row' className='tab-content'>
          <Col id='controls-col' className='homepage_col tab-pane active' role='tabpanel' md={3}>
            <Row float='left'>
              <p>This is the controls</p>
            </Row>
          </Col>
          <Col id='content-col' className='homepage_col tab-pane' role='tabpanel' md={6}>
            <Row className='justify-content-center'>
              <p>This is the Content Panel</p>
            </Row>
          </Col>
          <Col id='related-content-col' className='homepage_col tab-pane' role='tabpanel' md={3}>
            <Row className='float-right'>
              <p>This is the related Content Panel</p>
            </Row>
          </Col>
        </Row>
      </Container>
    )
  }
}

以及随附的 scss 根据屏幕大小进行修改：

@media(min-width: 768px) {
  .tab-content > .tab-pane {
    display: block;
  }
}

我的预期结果应该是较小的屏幕根据所选的选项卡将选项卡显示为全宽元素。然而，我仍然只能让标签显示与 content-col 一起显示，但无法切换。当我单击其他选项卡时，我可以在 url 栏中看到 href 更新，这表明它们正在触发，但由于某种原因，它们没有正确切换选项卡之间的“活动”类。

标签： react-bootstrap

解决方案

你的问题是，你正在active为所有人写作nav-link，

<ul className='nav nav-tabs d-md-none' role='tablist'>
    <li className='nav-item'>
        <a className='nav-link active' href='#controls-col' aria-controls='controls-col' data-toggle='tab' role='tab'>Controls</a>
    </li>
    <li className='nav-item'>
        <a className='nav-link active' href='#content-col' aria-controls='content-col' data-toggle='tab' role='tab'>Content</a>
    </li>
    <li className='nav-item'>
        <a className='nav-link active' href='#related-content-col' aria-controls='related-content-col' data-toggle='tab' role='tab'>Related</a>
    </li>
</ul>

对于初始渲染，您必须只有 1 nav-linkas active，因此请active从nav-link除第一个之外的其他中删除

<ul className='nav nav-tabs d-md-none' role='tablist'>
    <li className='nav-item'>
        <a className='nav-link active' href='#controls-col' aria-controls='controls-col' data-toggle='tab' role='tab'>Controls</a>
    </li>
    <li className='nav-item'>
        <a className='nav-link' href='#content-col' aria-controls='content-col' data-toggle='tab' role='tab'>Content</a>
    </li>
    <li className='nav-item'>
        <a className='nav-link' href='#related-content-col' aria-controls='related-content-col' data-toggle='tab' role='tab'>Related</a>
    </li>
</ul>

推荐阅读