css - b-list-group 和 b-list-group-item 的 BootstrapVue 样式

问题描述

因此，我在尝试设计带有社交媒体图标的导航栏时遇到了困难。我正在尝试实现类似于：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>

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

标签： cssbootstrap-vue

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

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

css - b-list-group 和 b-list-group-item 的 BootstrapVue 样式

问题描述

解决方案

推荐阅读