在Bootstrap组件中使用行和列时的虚线布局问题

<div class="container">
  <div class="row">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-4">Column 2</div>
    <div class="col-md-4">Column 3</div>
  </div>
</div>

.border-dashed::before, .border-dashed::after {
  content: "";
  display: table;
}

.border-dashed::before {
  border-top: 1px dashed #000;
  width: 100%;
}

.border-dashed::after {
  border-bottom: 1px dashed #000;
  width: 100%;
}

.border-dashed {
  border-left: 1px dashed #000;
  border-right: 1px dashed #000;
}

<div class="container">
  <div class="row border-dashed">
    <div class="col-md-4 border-dashed">Column 1</div>
    <div class="col-md-4 border-dashed">Column 2</div>
    <div class="col-md-4 border-dashed">Column 3</div>
  </div>
</div>