Bootstrap列布局div间距设置及archive.html文本区域行分隔实现

嘿，这三个需求都不难，我给你拆解成具体步骤和代码，直接套用就行！

有两种常用方案，选你需要的就行：

方案1：用<textarea>（原生输入控件，适合纯文本） #

<div class="mb-4">
  <textarea class="form-control bg-white border rounded p-3" rows="5" placeholder="在这里输入内容..."></textarea>
</div>

解释：bg-white给白色背景，border加灰色边框，rounded做圆角，p-3加内边距让内容不贴边，rows控制初始高度，placeholder给用户输入提示。

方案2：用contenteditable的div（样式更灵活，支持富文本） #

<div class="bg-white border rounded p-3 mb-4" contenteditable="true" style="min-height: 120px;">
  这里是初始文本，你可以直接编辑我哦～
</div>

解释：contenteditable="true"让div变成可编辑状态，min-height保证它不会因为内容少变得太矮，其他类和上面一样，用来做基础样式。

Bootstrap 5+推荐用官方的gutter类来控制，不用自己写margin破坏布局：

<!-- g-3是中等间距，可选g-1到g-5，数值越大间距越宽 -->
<div class="row g-3">
  <div class="col-md-6">
    <div class="bg-light p-3 border rounded">左侧列内容</div>
  </div>
  <div class="col-md-6">
    <div class="bg-light p-3 border rounded">右侧列内容</div>
  </div>
</div>

如果需要响应式间距（比如小屏幕紧凑，大屏幕宽松），可以写g-md-4，意思是中等屏幕及以上用更大的间距。要是想更自定义，也可以给列加mx-2（左右margin），但优先用gutter类，更符合框架规范。

三种常用方式，按需选择：

方式1：用Bootstrap自带的<hr>标签（最省事） #

<div class="row g-3 mb-4">
  <!-- 第一行内容 -->
</div>

<hr class="my-4"> <!-- my-4控制上下间距，避免和内容挤在一起 -->

<div class="row g-3">
  <!-- 第二行内容 -->
</div>

方式2：给行加顶部边框（更低调） #

<div class="row g-3 mb-4">
  <!-- 第一行内容 -->
</div>

<div class="row g-3 pt-4 border-top"> <!-- border-top加顶部边框，pt-4加内边距避免内容贴边框 -->
  <!-- 第二行内容 -->
</div>

方式3：自定义分隔线（完全按你想要的样式来） #

<div class="row g-3 mb-4">
  <!-- 第一行内容 -->
</div>

<div class="separator my-4" style="height: 2px; background-color: #eee; width: 100%;"></div>

<div class="row g-3">
  <!-- 第二行内容 -->
</div>

把三个需求放在一起的完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Archive Page</title>
  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-5">
    <!-- 白色可输入文本区 -->
    <div class="mb-4">
      <h5 class="mb-2">输入你的内容</h5>
      <div class="bg-white border rounded p-3" contenteditable="true" style="min-height: 150px;">
        这里是初始文本，直接编辑即可～
      </div>
    </div>

    <!-- 带间距的列布局 -->
    <div class="row g-4 mb-5">
      <div class="col-md-6">
        <div class="bg-white border rounded p-4">
          <h6>左侧列</h6>
          <p>这是左侧列的内容，和右侧列有合适的间距</p>
        </div>
      </div>
      <div class="col-md-6">
        <div class="bg-white border rounded p-4">
          <h6>右侧列</h6>
          <p>这是右侧列的内容，和左侧列有合适的间距</p>
        </div>
      </div>
    </div>

    <!-- 行分隔线 -->
    <hr class="my-4">

    <!-- 第二行内容 -->
    <div class="row g-4">
      <div class="col-md-12">
        <div class="bg-white border rounded p-4">
          <h6>第二行内容</h6>
          <p>这是分隔线下面的内容，和上面的行清晰区分开了</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 引入Bootstrap JS（可选，需要交互组件的话加） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

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