如何在 React js 中使用引导程序使网格响应？答案

【问题标题】：How to make Grid responsive using bootstrap in react js?如何在 React js 中使用引导程序使网格响应？
【发布时间】：2019-11-30 01:22:24
【问题描述】：

我在我的 react js 项目中使用引导程序。我正在使用 css 网格来显示一些卡片，但它没有响应。

import React from "react";
import "./Project.css";
export const Project = () => {
  return (
    <div>
      <div className="container tracked">
          <div className="card">
          <div className="face">
            <div className="content">
              <h2 className="titler">TITLE</h2>
              <p>
                BLABLA</p>
            </div>
          </div>
          <div className="face">
            <h4>Product Search</h4>
          </div>
          </div>
       </div>
   );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

.tracked{
    width: 1200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-gap: 15px;
    margin: 0 auto;
}

应该连续三张卡片，并且应该是响应式的。截至目前，它没有响应，但在桌面上运行良好。

【问题讨论】：

使用 reactstrap。它的引导程序包用于反应。然后你可以使用它的 Row 和 Col。

标签： css reactjs bootstrap-4

【解决方案1】：

Check thisMDBootstrap

import { MDBContainer, MDBRow, MDBCol } from "mdbreact";

const gridExamplesPage = () => {
  return (
    <MDBContainer>
      <MDBRow>
        <MDBCol size="4">.col-4</MDBCol>
        <MDBCol size="4">.col-4</MDBCol>
        <MDBCol size="4">.col-4</MDBCol>
      </MDBRow>

      <MDBRow>
        <MDBCol sm="4">.col-sm-4</MDBCol>
        <MDBCol sm="4">.col-sm-4</MDBCol>
        <MDBCol sm="4">.col-sm-4</MDBCol>
      </MDBRow>

      <MDBRow>
        <MDBCol md="4">.col-md-4</MDBCol>
        <MDBCol md="4">.col-md-4</MDBCol>
        <MDBCol md="4">.col-md-4</MDBCol>
      </MDBRow>

      <MDBRow>
        <MDBCol lg="4">.col-lg-4</MDBCol>
        <MDBCol lg="4">.col-lg-4</MDBCol>
        <MDBCol lg="4">.col-lg-4</MDBCol>
      </MDBRow>

      <MDBRow>
        <MDBCol xl="4">.col-xl-4</MDBCol>
        <MDBCol xl="4">.col-xl-4</MDBCol>
        <MDBCol xl="4">.col-xl-4</MDBCol>
      </MDBRow>
    </MDBContainer>
  );
}

export default gridExamplesPage;`

【讨论】：

【解决方案2】：

请尝试一下，让我知道它是否适合您。我在 Bootstrap 中使用了网格系统。如果您有任何疑问，请查看此链接 (https://getbootstrap.com/docs/4.0/layout/grid/)。

感谢和问候，帕塔萨拉蒂房车

import React from "react";
import "./Project.css";
export const Project = () => {
  return (
    <div>
      <div className="container-fluid text-center">
        <div className="row">
          <div className="col-lg-4">
             <div className="card">
               <div className="face">
                <div className="content">
                  <h2 className="titler">TITLE</h2>
                  <p>BLABLA</p>
                </div>
              </div>
              <div className="face">
                <h4>Product Search</h4>
              </div>
            </div>
          </div>
          <div className="col-lg-4">
             <div className="card">
               <div className="face">
                <div className="content">
                  <h2 className="titler">TITLE</h2>
                  <p>BLABLA</p>
                </div>
              </div>
              <div className="face">
                <h4>Product Search</h4>
              </div>
            </div>
          </div>
          <div className="col-lg-4">
             <div className="card">
               <div className="face">
                <div className="content">
                  <h2 className="titler">TITLE</h2>
                  <p>BLABLA</p>
                </div>
              </div>
              <div className="face">
                <h4>Product Search</h4>
              </div>
            </div>
          </div>
        </div>
       </div>
      </div>
   );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：

【解决方案3】：

你需要像这样导入引导 css：首先安装引导程序：

npm install --save bootstrap

或

yarn add bootstrap

然后将 css 导入到你的项目中

import 'bootstrap/dist/css/bootstrap.css'

你可以使用 react-bootstrap:

npm install react-bootstrap

【讨论】：