时间戳

首页 > 解决方案 > 如何在 React js 中使用引导程序使 Grid 响应？

css - 如何在 React js 中使用引导程序使 Grid 响应？

问题描述

我在我的 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;
}

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

标签： cssreactjsbootstrap-4

解决方案

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

谢谢和问候， Parthasarathi RV

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>

推荐阅读