使用 b-collapse 和 css 修改样式 [英] Modify style with b-collapse and css

问题描述

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

我是这样实现的:

<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=#"目标=_self"data-menu-item-id=473"><span class="text">GTI</span></a>
<div data-cat-acc="474";class="grid-item parent-lvl-2"><a class="link sty-1 grid-sty-1";href="#";目标=_self"data-menu-item-id=474"><span class="text">宠物</span></a>

</b-折叠>

如果这样，您可以修改:collapse-cat-lvl1-469 ???

我打算使用 CSS 为其提供更好的样式，或者以某种方式让我可以水平而不是垂直地查看菜单

我有这个:

我想解决这个问题:

我的 CSS:

 .navbar-greetings, .login-section{display: none}#menu-header.collapse:not(.show){显示:块；}#菜单标题{位置:固定；顶部:25px；最大宽度:83%；边距:0 自动；左:8.32%；.控制板{按钮{显示:块；白颜色;字体大小:13px；字体系列:'VWHead-Bold';}}#accordion-mbl-菜单{显示:弹性；}}

我真的很陌生，在网上搜索我还没有解决这个问题

解决方案

我相信你可以通过 CSS 做到这一点，而无需使用 b-collapse，也许使用b-dropdown 比 b-collapse 更好，但我理解你的问题并制作了一个代码片段.

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

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

.customHorizo​​ntalList {列表样式:无；显示:弹性；弹性方向:行；}.customHorizo​​ntalList>li {右边距: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="应用程序"><b-button v-b-toggle.collapse-1 variant="primary">切换折叠</b-button><b-collapse id="collapse-1" class="mt-2"><ul class="customHorizo​​ntalList"><li>项目1</li><li>项目2</li><li>项目3</li></b-折叠>

what I am trying to do is modify the style of my b-collapse since by default it has a vertical style that I think and what I want is to give my menu a horizontal style

This is how I implement it:

<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>

You can modify in if this: collapse-cat-lvl1-469 ???

What I intend is to give it better style with CSS, or some way that I can see my menu horizontally and not vertically

I have this:

I want to get to this:

My 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;
    }
  }

I am really new to this, searching the web I have not been able to solve this problem

解决方案

I believe that you can do this by just CSS without using b-collapse, and maybe using b-dropdown is better than b-collapse but I understand your problem and make a code snippet.

Look at this solution and maybe it'll be useful for you.

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>

这篇关于使用 b-collapse 和 css 修改样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！