如何去除Bootstrap中行之间的垂直间距

想要去除Bootstrap布局中行之间难看的垂直间距：

希望实现紧凑的选项列表布局效果。

<div class="outerbox container-fluid vw-100">
  <div class="row vw-100 justify-content-center">
    <div class="col-6 col-md-7 " style=" background: rgba(255, 255, 255, 0.45);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.18);">
      <div class="optionrow row justify-content-center py-0">
        <div class="col-8">
          <a href="f1/f1.html">
            <div class="option">Function 1</div>
          </a>
        </div>
      </div>
      <div class="optionrow row justify-content-center">
        <div class="col-8">
          <a href="f2/f2.html">
            <div class="option">Function 2</div>
          </a>
        </div>
      </div>
      <div class="optionrow row justify-content-center">
        <div class="col-8">
          <a href="f3/f3.html">
            <div class="option">Function 3</div>
          </a>
        </div>
      </div>
      <div class="optionrow row justify-content-center">
        <div class="col-8">
          <a href="Past Question Papers/past papers.html">
            <div class="option">Past Papers</div>
          </a>
        </div>
      </div>

    </div>
  </div>
</div>

.option {
            margin: 0;
            padding: 10px;
            border: unset;
            border-radius: 15px;
            color: black;
            z-index: 1;
            background: #e8e8e8;
            position: relative;
            font-weight: 1000;
            font-size: 14px;
            -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
            box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
            transition: all 250ms;
            overflow: hidden;

        }

        .option::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 0;
            border-radius: 15px;
            background-color: #212121;
            z-index: -1;
            -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
            box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
            transition: all 250ms
        }

        .option:hover {
            color: #e8e8e8;
        }

        .option:hover::before {
            width: 100%;
        }

.optionrow {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.optionrow a {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

推测问题由Bootstrap默认样式导致，需调整实现紧凑布局。

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