是否可以在引导程序中小于lg的屏幕上将列表组从垂直动态更改为水平？

问题描述 投票：0回答：2

我有一个带有图标和链接的列表组。我的目标是仅在屏幕小于lg时显示图标，并将方向从垂直更改为水平。

到目前为止，我设法只在小于lg的屏幕上显示图标；但是，我正在努力找出如何针对小于lg的屏幕动态地将方向从垂直更改为水平。我该如何实现？

代码：

<template>
    <div>
        <b-container>
            <b-row>
                <b-col class="col-md-6 col-xl-3">
                    <b-list-group>
                        <b-list-group-item>
                            <b-link v-on:click="component = 'product-list'">
                                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
                                    <path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z"/>
                                </svg>
                                <span class="d-none d-lg-block">Material List</span>
                            </b-link>
                        </b-list-group-item>
                        <b-list-group-item>
                            <b-link v-on:click="component = 'batch-create-material-list'">
                                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
                                    <path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 9h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z"/>
                                </svg>
                                <span class="d-none d-lg-block">Batch Create Material List</span>
                            </b-link>
                        </b-list-group-item>
                    </b-list-group>
                </b-col>
                <b-col class="col-md-6 col-xl-9">
                    <keep-alive>
                        <component v-bind:is="component"></component> 
                    </keep-alive>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
import ProductList from '../../components/admin/ProductList';
import CreateProductAndCategory from '../../components/admin/CreateProductAndCategory';

export default {
    name: 'Dashboard',
    components: {
        'product-list': ProductList,
        'batch-create-material-list': CreateProductAndCategory,
    },

    data() {
        return {
            component: ''
        }
    },


}
</script>

<style scoped>

</style>

编辑：我试图弄清楚这一点，并尝试了所有响应式变体：<b-list-group horizontal="sm">，<b-list-group horizontal="md">和<b-list-group horizontal="xl">均无法正常工作。在所有屏幕尺寸上，列表组都是水平的，但sm

我尝试过的代码：

<template>
    <div>
        <b-container>
            <b-row>
                <b-col class="col-md-6 col-xl-3" >
                    <b-list-group >
                        <b-list-group-item class="d-lg-vertical">
                            <b-link v-on:click="component = 'product-list'">
                                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
                                    <path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z"/>
                                </svg>
                                <span class="d-none d-lg-block">Material List</span>
                            </b-link>
                        </b-list-group-item>
                        <b-list-group-item>
                            <b-link v-on:click="component = 'batch-create-material-list'">
                                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
                                    <path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 9h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z"/>
                                </svg>
                                <span class="d-none d-lg-block">Batch Create Material List</span>
                            </b-link>
                        </b-list-group-item>
                    </b-list-group>
                </b-col>
                <b-col class="col-md-6 col-xl-9">
                    <keep-alive>
                        <component v-bind:is="component"></component> 
                    </keep-alive>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
import ProductList from '../../components/admin/ProductList';
import CreateProductAndCategory from '../../components/admin/CreateProductAndCategory';

export default {
    name: 'Dashboard',
    components: {
        'product-list': ProductList,
        'batch-create-material-list': CreateProductAndCategory,
    },

    data() {
        return {
            component: 'product-list'
        }
    },


}
</script>

<style scoped>
/* small screen  below 992px width */
@media only screen and (max-width : 991px) { 
  .d-none{display:none;} 
}


/* large screen  above 991px width */
@media only screen and (min-width : 992px) {
  .d-lg-vertical{
    display:block;
  }
}
</style>
vue.js bootstrap-vue
2个回答
0
投票

我知道了。感谢@GurulingKumbhar通过提及@media规则帮助我达到了这一点，这使我更深入地研究了所有这些东西的工作原理，然后我偶然发现了flexbox。

<template>
    <div>
         <b-container>
            <b-row>
                <b-col class="col-md-6 col-xl-3">
                    <b-list-group id="" class="d-flex horiz">
                        <b-list-group-item>
                            <b-link v-on:click="component = 'product-list'">
                                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
                                    <path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z"/>
                                </svg>
                                <span class="hide-title">Material List</span>
                            </b-link>
                        </b-list-group-item>
                        <b-list-group-item>
                            <b-link v-on:click="component = 'batch-create-material-list'">
                                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
                                    <path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 9h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z"/>
                                </svg>
                                <span class="hide-title">Batch Create Material List</span>
                            </b-link>
                        </b-list-group-item>
                    </b-list-group>
                </b-col>
                <b-col class="col-md-6 col-xl-9">
                    <keep-alive>
                        <component v-bind:is="component"></component>
                    </keep-alive>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
import ProductList from '../../components/admin/ProductList';
import CreateProductAndCategory from '../../components/admin/CreateProductAndCategory';

export default {
    name: 'Dashboard',

    components: {
        'product-list': ProductList,
        'batch-create-material-list': CreateProductAndCategory,
    },

    data() {
        return {
            component: 'product-list',
        }
    },


}
</script>

<style scoped>
/* small screen  below 992px width */
@media only screen and (max-width : 992px) { 
  .horiz {
    flex-direction: row;
  }

  .hide-title {
    display:none;
  } 
}
</style>
0
投票

您可以这样做-

模板

<div class="container">
    <div class="row">
        <div class="col-xl-3 col-lg-4 col-md-4 col-sm-12 col-xs-12">
           <b-list-group>
                        <b-list-group-item class="d-lg-vertical">
                            <b-link v-on:click="component = 'product-list'">
                                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
                                    <path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z"/>
                                </svg>
                                <span class="custom-sm-d-none">Material List</span>
                            </b-link>
                        </b-list-group-item>
                        <b-list-group-item class="d-lg-vertical">
                            <b-link v-on:click="component = 'batch-create-material-list'">
                                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
                                    <path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 9h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z"/>
                                </svg>
                                <span class="custom-sm-d-none">Batch Create Material List</span>
                            </b-link>
                        </b-list-group-item>
                    </b-list-group>
        </div>

      <div class="col-xl-9 col-lg-8 col-md-8 col-sm-12 col-xs-12">
          <keep-alive>
           <component v-bind:is="component"></component>
          </keep-alive>
      </div>
    </div>
  </div>

CSS

/* small screen  below 768px width */
@media only screen and (max-width : 767px) { 
  .custom-sm-d-none{display:none;} 
}

/* large screen  above 767px width */
@media only screen and (min-width : 768px) {
  .d-lg-vertical{
    display:block;
  }
}

小提琴-

https://jsfiddle.net/guruling/f9m1v0so/33/

希望它能解决您的问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.