如何使用Bootstrap将div内文本固定在左侧至中间区域

嘿，我明白你遇到的问题了——想把标签内容牢牢固定在左侧区域和中间内容区之间，现在能左对齐，但内容一多就“跑”到中间区域外面去了对吧？别担心，我给你两个靠谱的解决方案，都是基于Bootstrap的特性来实现的：

方案一：自定义容器样式（简单直接） #

这个方法通过设置固定的最大宽度和换行规则，让标签内容被限制在你想要的区间内，不会溢出到中间区域：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <style>
    /* 自定义标签容器样式 */
    .fixed-tag-container {
      /* 假设左侧栏占页面25%宽度（对应Bootstrap的col-md-3），这里设置最大宽度和左侧栏一致 */
      max-width: 25%;
      /* 左对齐左侧区域 */
      margin-left: 0;
      /* 关键：让长文本自动换行，避免横向溢出 */
      overflow-wrap: break-word;
      /* 可选：处理超长连续单词的换行 */
      word-break: break-all;
      padding: 0.5rem;
      background-color: #ffc107;
    }

    /* 响应式适配：移动端让标签容器全屏显示 */
    @media (max-width: 768px) {
      .fixed-tag-container {
        max-width: 100%;
        margin-bottom: 1rem;
      }
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <!-- 左侧固定区域 -->
      <div class="col-md-3 bg-light p-3">
        左侧固定内容区
      </div>
      <!-- 固定在左侧与中间之间的标签容器 -->
      <div class="fixed-tag-container">
        这里是标签内容，即使添加超级超级超级超级超级超级超级超级超级超级长的内容，也不会超出中间区域啦！
      </div>
      <!-- 中间内容区域 -->
      <div class="col-md-6 bg-info p-3">
        中间主要内容区
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

核心要点： #

• max-width：直接限制标签容器的最大宽度，刚好匹配左侧区域到中间区域的间隔宽度，确保内容不会越界。
• overflow-wrap: break-word：强制长文本在容器边界内换行，完美解决内容溢出的问题。
• 媒体查询：适配移动端，避免小屏幕上布局拥挤。

方案二：利用Bootstrap网格系统（更贴合框架规范） #

如果你想完全用Bootstrap的网格逻辑来实现，可以自定义一个列，让它刚好占据左侧到中间的空间：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <style>
    /* 自定义标签列的宽度 */
    .tag-column {
      flex: 0 0 auto;
      /* 和左侧栏宽度一致，这里对应col-md-3的25%宽度 */
      width: 25%;
      padding: 0.5rem;
      background-color: #ffc107;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <div class="row align-items-start">
      <!-- 左侧固定区域 -->
      <div class="col-md-3 bg-light p-3">
        左侧固定内容区
      </div>
      <!-- 自定义标签列，嵌入网格系统 -->
      <div class="tag-column">
        这里是标签内容，不管加多少内容，都会乖乖待在这个列里，不会跑到中间区域去～
      </div>
      <!-- 中间内容区域 -->
      <div class="col-md-6 bg-info p-3">
        中间主要内容区
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

核心要点： #

• 自定义tag-column类，用width: 25%匹配左侧栏的宽度，完美融入Bootstrap的网格布局。
• flex: 0 0 auto确保列宽度固定，不会被其他内容挤压变形。

你可以根据自己实际的布局比例（比如左侧栏是col-md-2，那对应的宽度就改成16.666%）调整数值，两个方案都能完美解决你的问题！

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