Question

我正在构建一个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;
  }
}

我的预期结果应该是较小的屏幕根据所选的标签将标签显示为全角元素。但是，我仍然只能看到带有内容列的选项卡显示，但是无法切换。当我单击其他选项卡时，我可以在网址栏中看到href更新，表明它们正在触发，但是由于某些原因，它们没有在选项卡之间正确切换“活动”类。

Answer 1

您的问题是，您正在为所有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-link作为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>

选项卡未在较小的屏幕上显示

1 个答案: