b-list-group 和 b-list-group-item 的 BootstrapVue 样式答案

【问题标题】：BootstrapVue Styling of b-list-group and b-list-group-itemb-list-group 和 b-list-group-item 的 BootstrapVue 样式
【发布时间】：2026-02-21 21:40:01
【问题描述】：

所以，我在尝试设计带有社交媒体图标的导航栏时遇到了困难。我正在尝试实现类似于：https://codepen.io/matthew-spire/pen/GVQvJg，但我什至不知道如何去做。

现在我只有：

<!-- Social Media Navigation -->
    <b-navbar type="dark" variant="dark" class="justify-content-center">
      <b-list-group horizontal>
        <b-list-group-item href="#" target="_blank"><font-awesome :icon="['fab', 'instagram']" size="2x"/></b-list-group-item>
        <b-list-group-item href="#" target="_blank"><font-awesome :icon="['fab', 'facebook-f']" size="2x"/></b-list-group-item>
        <b-list-group-item href="#" target="_blank"><font-awesome :icon="['fab', 'twitter']" size="2x"/></b-list-group-item>
        <b-list-group-item href="#" target="_blank"><font-awesome :icon="['fab', 'youtube']" size="2x"/></b-list-group-item>
      </b-list-group>
    </b-navbar>

有什么建议或可以看的地方吗？我已经四处修补并尝试访问我想要的内容并相应地对其进行样式设置，但与我想要达到的结果相去甚远。

【问题讨论】：

标签： css bootstrap-vue

【解决方案1】：

这是一个可行的解决方案，我得到了很多帮助。比我预期的要多得多。

HTML：

<div id="app">
  <b-navbar toggleable="lg" type="dark" variant="dark" class="justify-content-center">

    <!-- Right aligned nav items -->
    <b-navbar-nav>
      <div class="instagram-circle circle text-center">
        <b-link class="social-icon" href="#"><i class="fab fa-instagram fa-lg"></i></b-link>
      </div>

      <div class="facebook-circle circle text-center">
        <b-link class="social-icon" href="#"><i class="fab fa-facebook fa-lg"></i></b-link>
      </div>

      <div class="twitter-circle circle text-center">
        <b-link class="social-icon" href="#"><i class="fab fa-twitter fa-lg"></i></b-link>
      </div>

      <div class="youtube-circle circle text-center">
        <b-link class="social-icon" href="#"><i class="fab fa-youtube fa-lg"></i></b-link>
      </div>

    </b-navbar-nav>
  </b-navbar>
</div>

CSS：

.social-icon {
  color: white;
  font-size: 25px;
  margin: 5px 5px;
  text-align: center;
  text-decoration: none;
}

.social-icon:hover {
  color: white;
  text-decoration: none;
}

.facebook-circle:hover {
  background: #4060a5;
}

.twitter-circle:hover {
  background: #00abe3;
}

.instagram-circle:hover {
  background: #375989;
}

.youtube-circle:hover {
  background: #ff1f25 !important;
}

.circle {
  background-color: grey;
  border-radius: 50%;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  padding: 15px;
}

JS：

new Vue({
  el: "#app",
  data() {
    return {};
  }
});

codepen 的链接：https://codepen.io/matthew-spire/pen/mNxbyR

【讨论】：

【解决方案2】：

使用b-navbar-nav和b-nav-item组件（而不是b-list-group，它不是导航栏支持的子组件）生成社交图标链接，然后使用Vue-loader的深度选择器设置样式根据需要使用图标。

https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements

【讨论】：