使用 b-collapse 和 css 修改样式答案

【问题标题】：Modify style with b-collapse and css使用 b-collapse 和 css 修改样式
【发布时间】：2021-07-08 22:57:51
【问题描述】：

我要做的是修改我的b-collapse 的样式，因为默认情况下它具有我认为的垂直样式，而我想要给我的菜单一个水平样式

这就是我的实现方式：

<div style="background-color:white;">
      <b-collapse id="collapse-cat-lvl1-469">
        <div data-cat-acc="473" class="grid-item parent-lvl-2">
          <a class="link -1 grid-sty-1" href="#" target="_self" data-menu-item-id="473">
            <span class="text">GTI</span>
          </a>
        </div>
        <div data-cat-acc="474" class="grid-item parent-lvl-2">
          <a class="link sty-1 grid-sty-1" href="#" target="_self" data-menu-item-id="474">
            <span class="text">Pets</span>
          </a>
        </div>
     </b-collapse>
    </div>

如果是这样，你可以修改：collapse-cat-lvl1-469 ???

我打算用 CSS 给它更好的样式，或者以某种方式让我可以水平而不是垂直地看到我的菜单

我有这个：

我想解决这个问题：

我的 CSS：

  .navbar-greetings, .login-section{display: none}

  #menu-header.collapse:not(.show){
    display: block;
  }

  #menu-header{
    position: fixed;
    top: 25px;
    max-width: 83%;
    margin: 0 auto;
    left: 8.32%;
    .panel{
      button{
        display: block;
        color: white;
        font-size: 13px;
        font-family: 'VWHead-Bold';
      }
    }
    #accordion-mbl-menu{
      display: flex;
    }
  }

我真的很陌生，在网上搜索我一直无法解决这个问题

【问题讨论】：

标签： css vue.js bootstrap-vue

【解决方案1】：

我相信你可以只通过CSS 而不使用b-collapse 来做到这一点，也许使用b-dropdown 比b-collapse 更好，但我理解你的问题并编写代码sn-p。

看看这个解决方案，也许它会对你有用。

new Vue({
  el: '#app',
})

.customHorizontalList {
  list-style: none;
  display: flex;
  flex-direction: row;
}

.customHorizontalList>li {
  margin-right: 1rem;
}

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
    <b-button v-b-toggle.collapse-1 variant="primary">Toggle Collapse</b-button>
  <b-collapse id="collapse-1" class="mt-2">
    <ul class="customHorizontalList">
      <li>ITEM 1</li>
      <li>ITEM 2</li>
      <li>ITEM 3</li>
    </ul>
  </b-collapse>
</div>

【讨论】：

好的，我只是有一个问题，我必须在标签内添加'<link>, <script>：<script type="application/javascript"> ...</script> ????如果我正在使用 Vue.JS
如果您觉得有帮助，请考虑接受，谢谢。 @Inphyy

【解决方案2】：

在包含元素上使用display: flex

【讨论】：

所以我已经实现了
@Inphyy 第一行是水平的。做同样的事情。