如何使用Bootstrap Col实现页面内容上下分栏布局

先调整组件结构，把顶部（col2、col3）和底部（col1、col4）的内容分组，再通过 CSS Flexbox 实现布局和差异化样式：

修改后的 React 组件代码 #

import React from 'react'
import "./style.css"

const Footer = () => {
  return(
    <div className="footer">
      {/* 顶部区域：放置 col2 和 col3 */}
      <div className="footer-top">
        <span className="col2">
          <span className='content21'>Join us</span> 
          <span className='content22'>Home</span> 
          <span className='content23'>Services</span> 
          <span className='content24'>Case study</span> 
        </span>
        <span className="col3">
          <span>Team</span>
          <span>Contact us</span>
          <span>sitemap</span>
        </span>
      </div>
      {/* 底部区域：放置 col1 和 col4 */}
      <div className="footer-bottom">
        <span className="col1">
          All&nbsp;rights&nbsp;reserved
        </span>
        <span className="col4">Connect with us</span>
      </div>
    </div>
  )
}

export default Footer;

对应的 CSS 样式（style.css） #

/* 整体 Footer 容器 */
.footer {
  width: 100%;
  padding: 20px 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background-color: #f8f9fa;
}

/* 顶部区域布局 */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #e9ecef;
}

/* 底部区域布局 */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* col2 专属样式 */
.col2 {
  display: flex;
  gap: 22px;
  font-size: 14px;
  color: #2d3748;
}

.col2 span {
  cursor: pointer;
  transition: color 0.2s ease;
}

.col2 span:hover {
  color: #2b6cb0;
}

/* col3 专属样式 */
.col3 {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #4a5568;
}

/* col1 专属样式 */
.col1 {
  font-size: 12px;
  color: #718096;
}

/* col4 专属样式 */
.col4 {
  font-size: 13px;
  color: #2b6cb0;
  font-weight: 500;
}

说明 #

• 通过拆分 footer-top 和 footer-bottom 容器，明确区分上下区域的内容结构；
• 用 Flexbox 实现灵活布局，justify-content: space-between 让左右元素自动分散对齐；
• 每个列都设置了差异化的字体大小、颜色，col2 额外添加 hover 交互效果，满足样式区分需求；
• 可根据设计需求调整 padding、gap、颜色值等参数，适配不同场景。

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