使用Bootstrap Grid可以简化HTML的行和列结构。
注意，Bootstrap Grid中的每一行包含12列。
该结构有3个列：
1.溶液编号（col-2）
1.解决方案名称（col-2）
1.最右边的部分，包含历史记录、天数、价格等（col-5，偏移量：col-3）
3.1要水平显示历史记录、天数、价格等，您需要根元素的类：“d-flex”和“flex-row”。每个项目都应该有“flex-grow-1”以充分利用flex中的宽度。
3.2.要显示上述垂直对齐的项目，根元素需要“call-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>

字符串
Demo @ StackBlitz的

您可以使用简单的col类或col-*来分发您的DIV
你可以去&检查https://getbootstrap.com/docs/4.0/layout/grid/更好的清晰度，我相信它会解决你未来的查询太多

将下面的css应用到你的容器类中：

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

字符串

如果你想在一个容器中有一系列的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