如果你的 React 和 Bootstrap 列无法协同工作该怎么办

2020-11-10 08:00飞浪

介绍

在 React 项目中使用原生 Bootstrap 经常会由于初始设置不正确而导致错误。为了使 Bootstrap 列协同工作，您需要确保已正确导入并要求包含row和col类样式的 CSS 文件。否则，您的 Bootstrap 行和列将像常规<div>一样运行，而没有支持其预期结构所需的样式。在本指南中，您将学习如何正确设置 React 和 Bootstrap，以便 Bootstrap 列能够正确地协同工作。

执行

使用以下命令创建一个新的 React 项目：

      npx create-react-app react-bootstrap-columns

在根文件夹中，使用以下命令通过 npm 安装 Bootstrap：

      npm i bootstrap

接下来，修改App.js，如下所示。

      import './App.css';

function App() {
  return (
    <div className="App">
      <div className="row">
        <div className="col">
          <div className="box">Col 1/3</div>
        </div>
        <div className="col">
          <div className="box">Col 2/3</div>
        </div>
        <div className="col">
          <div className="box">Col 3/3</div>
        </div>
      </div>
    </div>
  );
}

export default App;
    

App组件只是输出三个嵌套的<div>，其中包含父<div>内的显示文本。父<div>是 Bootstrap 行，将所有子元素对齐在一行中。由于三个子<div>具有col类并且是行的直接子元素，因此每个子元素都应占据整行宽度的三分之一，彼此相邻，作为等距的列。在App.css中添加一些简单的样式，如下所示。

      .App{
  max-width: 100vw;
  overflow-x: hidden;
}
.box{
  margin: 10px;
  padding: 20px;
  border: 2px solid salmon;
  text-align: center;
  color: salmon;
}
    

与预期结果相反，三个带边框的框显示为常规<div>，跨越整行，堆叠在一起，而不是按列对齐。这是因为即使项目中安装了 Bootstrap，也不会应用row和col类的默认 Bootstrap 样式。App 组件只是加载 JSX，而没有为使用的类声明任何样式。这些样式存在于安装整个 Bootstrap 库的node_modules文件夹内的 CSS 文件中。在App组件顶部导入此文件，如下所示。

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

现在，所有样式都恢复了，三列并排堆叠在一行中。框内文本的字体系列也会发生变化。这是因为它从 Bootstrap 的 CSS 文件中继承了一些样式。

结论

了解不同的 UI 库如何让您为其组件导入所需的样式表非常重要。通过下载文件或使用 CDN 使用 Bootstrap 可能不会产生错误，因为样式是通过 <script>或<link>标签发送到您的组件的。但是当通过 npm 使用它时，您需要将样式表作为模块导入到您打算使用其原生类的每个组件中。相同的模式可以扩展到 React Bootstrap、Reactstrap 等库。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

曝光24086浏览1275