反应引导自动布局列没有响应

Question

我正在尝试遵循 React Bootstrap 的自动布局documentation，当它显示在我的代码上时，它为列值提供了自己的空间，并且不允许它们像文档中那样响应。

代码如下：

function App() {
  return (
    <div>
    <Container fluid>
      <Row className="row">
        <Col className="column">1 of 2</Col>
        <Col className="column">2 of 2</Col>
      </Row>
      <Row className="row">
        <Col className="column">1 of 3</Col>
        <Col className="column">2 of 3</Col>
        <Col className="column">3 of 3</Col>
      </Row>
    </Container>
    </div>
  );
}

如果您检查文档的“自动布局”部分，它应该具有相同的效果，即列尽可能长地占用第一个空间。

我已经

• 添加 react-bootstrap 并通过终端安装

如您所见，“2 of 2”应该与“1 of 2”处于同一级别，并且应该根据文档中的自动布局属性减半，但它没有这样做。

如何让它工作？

Answer 1

我认为你没有导入react-bootstrap的css

只需添加

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
  crossorigin="anonymous"
/>

进入你的index.html 或

import 'bootstrap/dist/css/bootstrap.min.css';

在您的App.js、Root.js 两者都应该工作， 找到here

Answer 2

首先不要把div放在它周围，你可以在里面添加空元素就像

function App() {
  return (
    <>
      //rest of code
    </>
  );
} 

或更好的选择 - 使用 react fragment:

 function App() {
      return (
     <Fragment>
        // rest of code
      </Fragment>
      );
    } 

第二件事 - 您不必向引导元素添加任何类名。行和列将自动设置样式，因此您的代码应如下所示：

function App() {
  return (
   <Fragment>
    <Container fluid>
      <Row>
        <Col>1 of 2</Col>
        <Col>2 of 2</Col>
      </Row>
      <Row>
        <Col>1 of 3</Col>
        <Col>2 of 3</Col>
        <Col>3 of 3</Col>
      </Row>
    </Container>
   </Fragment>
  );
}

它应该可以工作，如果没有，你肯定会以错误的方式导入引导程序