在bootstrap vue中，是否可以在小于lg的屏幕上动态地将列表组从垂直更改为水平

Question

我有一个带有图标和链接的列表组。我的目标是只在屏幕小于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>

Answer 1

你可以这样做-

模板

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

希望它能解决你的问题。

Answer 2

我想明白了。感谢@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>