为什么我的列看起来如此分离？

Question

我正在为页面做页脚。由于某些原因，这些列看起来彼此分离。有办法解决吗？

我将vue与bootstrap vue一起使用。

我试图使用偏移量，但是那只会将我的列向右移动。如果最后不得不移动这些列-我想将它们向左移动，使它们看起来彼此更靠近。

模板

window.onload = () => {
  new Vue({
    el: '#app'
  })
}

.footer {
  background-color: #ffffff;
  padding: 60px 0
}

.footer-contact ul,
.footer-social-link ul {
  padding-left: 0
}

.footer-heading h4 {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  color: #000000
}

@media screen and (max-width:991px) {
  .footer-heading h4 {
    margin-top: 30px
  }
}

.footer-contact ul li {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #000000;
  padding-top: 20px
}

.footer-contact ul li i {
  color: #859da9;
  font-size: 18px;
  margin-right: 15px
}

.footer-contact ul li a {
  color: #000000
}

.footer-social-link ul li {
  display: inline-block
}

.footer-social-link ul li a {
  font-size: 15px;
  color: #000000;
  padding: 15px
}

.footer-social-link ul li a:hover {
  color: #859da9
}

.footer-menu ul {
  padding-left: 20px
}

.footer-menu ul li {
  list-style-type: none;
  padding: 5px 0
}

.footer-menu ul li a {
  font-size: 14px;
  font-weight: 500;
  color: #000000
}

.footer-menu ul li:before {
  content: "\f105";
  font-family: FontAwesome;
  font-size: 18px;
  margin-right: 10px;
  color: #859da9
}

.list-group-footer .list-group-item {
  background-color: transparent;
  border-top-color: transparent;
  border-bottom: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  font-size: 78%;
}

.h4-mine {
  font-size: 80%;
}

.h5-mine {
  font-size: 80%;
  color: black;
}

<link href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.0.4/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.4/dist/bootstrap-vue.js"></script>
<div id="app">
  <footer class="footer">
    <b-container>
      <b-row>
        <b-col cols="3" md="3" sm="6" xs="12">
          <b-img alt="logo" src="/img/logo/PastedGraphic-1-3.jpeg"></b-img>
          <div class="text-content black-color">
            <br>
            <h5 class="h5-mine">0800</h5>
          </div>
        </b-col>

        <b-col cols="3" md="3" sm="6" xs="12">
          <div class="footer-heading">
            <h4 class="h4-mine"> <strong>title</strong> </h4>
          </div>

          <div class="footer-contact">
            <b-list-group class="list-group-footer">
              <b-list-group-item> <strong>></strong> FAQ</b-list-group-item>
            </b-list-group>
          </div>
        </b-col>

        <b-col cols="3" md="3" sm="6" xs="12">
          <div class="footer-heading">
            <h4 class="h4-mine"> <strong>title2</strong> </h4>
          </div>

          <div class="footer-contact">
            <b-list-group-class class="list-group-footer">
              <b-list-group-item><strong>></strong> 112232342131</b-list-group-item>
              <b-list-group-item><strong>></strong> 2131231312</b-list-group-item>

            </b-list-group-class>
          </div>
        </b-col>

        <b-col cols="3" md="3" sm="6" xs="12">
          <div class="footer-heading">
            <h4 class="h4-mine"> <strong>Services</strong></h4>
          </div>

          <div class="footer-contact">
            <b-list-group class="list-group-footer">
              <b-list-group-item><strong>></strong> one</b-list-group-item>
              <b-list-group-item><strong>></strong> two</b-list-group-item>
              <b-list-group-item><strong>></strong> three</b-list-group-item>
            </b-list-group>
          </div>
        </b-col>

        <b-col cols="3" md="3" sm="6" xs="12">
          <div class="footer-heading">
            <h4 class="h4-mine"> <strong>News</strong></h4>
          </div>

          <div class="footer-contact">
            <b-list-group class="list-group-footer">
              <b-list-group-item><strong>></strong>newone</b-list-group-item>
              <b-list-group-item><strong>></strong>newtwo</b-list-group-item>
            </b-list-group>
          </div>
        </b-col>
      </b-row>
    </b-container>
  </footer>

</div>

图片以更好地说明：