求助：用Bootstrap拆分HTML的<div>为8等份及Angular布局实现

一、布局结构重构（基于Bootstrap网格） #

你的现有代码缺乏清晰的网格层级，导致排版混乱。以下是重构后的代码，用Bootstrap的row和col体系组织元素，确保对齐和布局规整：

<div class="container">
  <!-- 第一行：Solution Number 和 Solution Name -->
  <div class="row mb-3">
    <div class="col-md-6">
      <div class="solHeading">Solution Number</div>
      <div class="solnNumber">
        ISX0067537-001
        <img src="/assets/images/myImage.png" alt="My Image" class="ms-2">
      </div>
    </div>
    <div class="col-md-6">
      <div class="solHeading">Solution Name</div>
      <div class="solnNumber">My Solution 67537...</div>
    </div>
  </div>

  <!-- 第二行：LTO、时间、价格等元素 -->
  <div class="row align-items-center mb-3">
    <div class="col">
      <div class="solHeading">LTO</div>
    </div>
    <div class="col">
      <div class="d-flex align-items-center">
        <i class="fa fa-history hisIcon me-2"></i>
        <span class="days">12 Days</span>
      </div>
    </div>
    <div class="col">
      <div class="d-flex flex-column align-items-end">
        <span class="usd">USD</span>
        <span class="price">013232440.00</span>
      </div>
    </div>
    <div class="col">
      <div class="d-flex align-items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none" class="me-2">
          <path d="M8 18.5C6.9 18.5 6.01 19.4 6.01 20.5C6.01 21.6 6.9 22.5 8 22.5C9.1 22.5 10 21.6 10 20.5C10 19.4 9.1 18.5 8 18.5ZM2 2.5V4.5H4L7.6 12.09L6.25 14.54C6.09 14.82 6 15.15 6 15.5C6 16.6 6.9 17.5 8 17.5H20V15.5H8.42C8.28 15.5 8.17 15.39 8.17 15.25L8.2 15.13L9.1 13.5H16.55C17.3 13.5 17.96 13.09 18.3 12.47L21.88 5.98C21.96 5.84 22 5.67 22 5.5C22 4.95 21.55 4.5 21 4.5H6.21L5.27 2.5H2ZM18 18.5C16.9 18.5 16.01 19.4 16.01 20.5C16.01 21.6 16.9 22.5 18 22.5C19.1 22.5 20 21.6 20 20.5C20 19.4 19.1 18.5 18 18.5Z" fill="#626469"/>
          <path d="M23 7C23 10.0376 20.5376 12.5 17.5 12.5C14.4624 12.5 12 10.0376 12 7C12 3.96243 14.4624 1.5 17.5 1.5C20.5376 1.5 23 3.96243 23 7Z" fill="#DC0A0A"/>
          <path d="M15.7188 9.75002V8.93752L17.6172 7.17971C17.7786 7.02346 17.9141 6.88283 18.0234 6.75783C18.1345 6.63283 18.2188 6.51044 18.276 6.39065C18.3333 6.26912 18.362 6.13804 18.362 5.99742C18.362 5.84117 18.3264 5.70662 18.2552 5.59377C18.184 5.47919 18.0868 5.39151 17.9635 5.33075C17.8403 5.26825 17.7005 5.237 17.5443 5.237C17.3811 5.237 17.2387 5.26999 17.1172 5.33596C16.9957 5.40193 16.9019 5.49655 16.8359 5.61981C16.77 5.74308 16.737 5.88978 16.737 6.05992H15.6667C15.6667 5.71096 15.7457 5.40801 15.9036 5.15106C16.0616 4.89412 16.283 4.69533 16.5677 4.55471C16.8524 4.41408 17.1806 4.34377 17.5521 4.34377C17.934 4.34377 18.2665 4.41148 18.5495 4.5469C18.8342 4.68058 19.0556 4.86634 19.2135 5.10419C19.3715 5.34203 19.4505 5.6146 19.4505 5.9219C19.4505 6.12328 19.4106 6.32207 19.3307 6.51825C19.2526 6.71443 19.1128 6.93231 18.9115 7.1719C18.7101 7.40974 18.4262 7.69533 18.0599 8.02867L17.2812 8.79169V8.82815H19.5208V9.75002H15.7188Z" fill="#FAFAFA"/>
        </svg>
        <i class="fa fa-angle-down"></i>
      </div>
    </div>
  </div>

  <!-- 按钮行 -->
  <div class="row">
    <div class="col">
      <button mat-raised-button class="color-button layoutBtn">
        <div class="data">Go to Design Portal</div>
      </button>
    </div>
  </div>
</div>

关键调整说明： #

• 用row包裹每行元素，col划分列宽，确保元素横向对齐
• 用d-flex+align-items-center实现图标与文本垂直居中
• 用mb-3设置行间距，ms-2/me-2设置元素间距，优化排版可读性

二、Bootstrap实现8等分布局 #

Bootstrap默认是12列网格，无原生8等分类，可通过两种方式实现：

方式1：自定义CSS类 #

在全局样式文件（如styles.css）中添加：

.col-8th {
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

使用时直接给div加类：

<div class="row">
  <div class="col-8th">1/8</div>
  <div class="col-8th">2/8</div>
  <div class="col-8th">3/8</div>
  <div class="col-8th">4/8</div>
  <div class="col-8th">5/8</div>
  <div class="col-8th">6/8</div>
  <div class="col-8th">7/8</div>
  <div class="col-8th">8/8</div>
</div>

方式2：使用Flexbox原生属性 #

无需自定义CSS，直接用Bootstrap的d-flex和flex-fill：

<div class="d-flex">
  <div class="flex-fill">1/8</div>
  <div class="flex-fill">2/8</div>
  <div class="flex-fill">3/8</div>
  <div class="flex-fill">4/8</div>
  <div class="flex-fill">5/8</div>
  <div class="flex-fill">6/8</div>
  <div class="flex-fill">7/8</div>
  <div class="flex-fill">8/8</div>
</div>

这种方式下，所有子元素会自动均分父容器宽度，实现8等分效果。

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