如何使用 Bootstrap 将 HTML 中的 <div>s 分成 8 等份

使用 Bootstrap Grid，简化行和列中的 HTML 结构。

请注意，Bootstrap Grid 中的每一行都包含 12 列。

该结构有 3 列：

1. 解决方法编号 （col-2)

2. 解决方案名称 （col-2)

3. 最正确的部分是历史、天数、价格等（带偏移量：col-5col-3)

   3.1 要水平显示历史、天数、价格等，您需要具有类的根元素：“d-flex”和“flex-row”。每个项目都应该有“flex-grow-1”，以充分利用 flex 中的宽度。

   3.2. 要垂直对齐显示上述项目，根元素需要“align-items-center”类。

<div class="container">
  <div class="row">
    <div class="col-2">
      <div class="solHeading">Solution Number</div>
      <div class="solnNumber">
        ISX0067537-001
        <img src="/assets/images/myImage.png" alt="My Image" />
      </div>
    </div>
    <div class="col-2">
      <div class="solHeading">Solution Name</div>
      <div class="solnNumber">My Solution 67537...</div>
    </div>

    <div class="offset-3 col-5">
      <div class="d-flex flex-row align-items-center">
        <div class="flex-grow-1">
          <i class="fa fa-history hisIcon"></i>
        </div>

        <div class="days flex-grow-1">12 Days</div>
        <div class="usd flex-grow-1">USD</div>
        <div class="price flex-grow-1">013232440.00</div>
        <div class="flex-grow-1">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="25"
            viewBox="0 0 24 25"
            fill="none"
          >
            <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>
        </div>
        <div class="fa fa-angle-down flex-grow-1"></div>
        <div class="flex-grow-1">
          <button mat-raised-button class="color-button layoutBtn">
            <div class="data">Go to Design Portal</div>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

演示@ StackBlitz

您可以使用简单类或分发您的 DIVcolcol-*

你可以去检查 https://getbootstrap.com/docs/4.0/layout/grid/ 以获得更好的清晰度，我相信它也会解决你未来的疑问

将以下 css 应用于容器类：

display: flex; justify-content: space-between;

如果你想在一个容器中有一个 div 系列，但有一个 div 可以“扩展”所有，你可以简单地：

.container{
  display:flex;
  align-items:center;
}
.margin-left-auto{
  margin-left:auto

}

<div class="container">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div class="margin-left-auto"></div>
  <div>...</div>
</div>

如果你想要 8 个部分，你可以使用网格，简单地

.container{
  display: grid;
  grid-template-columns: repeat(8,1fr)
}

• 了解更多关于 css-flex 的信息
• 了解更多关于css-grid的信息