css - 如何在 Bootsrap 中使自己的元素响应？

Question

我有一个显示过程箭头的元素。如果我减小屏幕尺寸，外部工艺步骤的边缘就会被切断。

看来，Bootstrap 列的边界越过了箭头。

如何保护元素不被切断？

<div class="row">
  <div class="col-md-4">
    <h2>Headline</h2>
  </div>
  <div class="col-md-4">
    <div align="center" class='steps-container'>
      <div class='steps active'>
        <span>Step 1</span>
      </div>
      <div class='steps' routerLink="/Step2">
        <span>Step 2</span>
      </div>
      <div class='steps'>
        <span>Step 3</span>
      </div>
    </div>
  </div>
  <div class="col-md-4"> </div>
</div>

 *,
    *:after,
    *:before {
      box-sizing: border-box;
    }

    .steps-container {
      overflow: hidden;
      margin: 0px;
      padding: 0px;
      white-space: nowrap;
      border-left: 0px solid;
      border-right: 0px solid;
      width: 100%;
      counter-reset: steps;
    }

    .steps {
      position: relative;
      display: inline-block;
      left: -28px; /* -2px default + 26px offset to hide skewed area on the left side of first element*/
      height: 50px;
      line-height: 50px;
      margin-left: 0px;
      margin-right: 0px;
      counter-increment: steps;
      cursor: pointer;
      transition: background 1s;
      min-height: 50px;
      min-width:  150px;
    }
    .steps:after,
    .steps:before {
      position: absolute;
      left: 0px;
      height: 50%;
      width: 100%;
      border-top: 2px solid;
      border-bottom: 2px solid;
      border-left: 3px solid; /* thicker border as skew makes them look thin */
      border-right: 3px solid;
    }
    .steps:before {
      transform: skew(45deg);
      top: 0px;
      border-bottom: none;
      transform-origin: top left;
    }
    .steps span {
      display: block;
      padding-left: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      height: 75%;
    }
    ...

标签： cssbootstrap-4