在ReactJS中使用Bootstrap类渲染适配XL/LG屏幕的头部组件

我帮你整理并补全了这段仅适配XL（≥1200px）和LG（≥992px）尺寸屏幕的React头部组件代码，同时拆解下关键的Bootstrap类逻辑：

import React from 'react';
import ReactDOM from 'react-dom/client';

// 记得先在项目中引入Bootstrap CSS，比如在入口文件里加这行：
// import 'bootstrap/dist/css/bootstrap.min.css';

const Header = () => {
  return (
    <div className="container-fluid"> {/* 用container-fluid让头部占满宽度，也可换成container */}
      {/* 核心容器：仅在LG/XL大屏显示 */}
      <div className="col-xl-4 col-lg-4 d-none d-xl-block d-lg-block">
        <div className="row align-items-center"> {/* 加align-items-center让内容垂直居中 */}
          <div className="col-xl-12 col-lg-4">
            <a href="#" className="logo"><span>SP4RK.net</span></a>
          </div>
          <div className="col-xl-12 col-lg-8">
            <span className="slogan">Быстро. Удобно.</span>
          </div>
        </div>
      </div>
      {/* 可选：小屏替代内容，比如简化版logo */}
      <div className="d-block d-lg-none">
        <a href="#" className="logo-small"><span>SP4RK</span></a>
      </div>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

关键Bootstrap类说明： #

• d-none d-xl-block d-lg-block：这是实现仅大屏显示的核心：
  • d-none：默认在所有屏幕尺寸下隐藏该容器
  • d-lg-block：当屏幕宽度≥992px（LG尺寸）时，显示为块级元素
  • d-xl-block：当屏幕宽度≥1200px（XL尺寸）时，同样显示为块级元素
• col-xl-4 col-lg-4：在LG/XL屏幕下，这个容器占据Bootstrap栅格系统的4列宽度（总12列）
• col-xl-12 col-lg-4/col-xl-12 col-lg-8：
  • 在XL大屏下，logo和标语各占12列，实现上下垂直排列
  • 在LG屏幕下，logo占4列，标语占8列，实现左右并排布局

如果你的项目还没引入Bootstrap，记得通过npm安装后导入CSS，或者在HTML中直接引入CDN链接，这样所有类才能正常生效~

内容的提问来源于stack exchange，提问作者mex111