Vue.js 屏幕尺寸响应

Question

我为我的组件提供了 margin-left，因为我的侧边栏也阻止了“角色”和 table。

当屏幕小于 992 时，如何将 table 向右移动？我希望它能够响应所有屏幕尺寸并且我正在使用 Bootstrap vue.

Answer 1

如果屏幕为 992 像素或更小，您可以使用媒体查询运行

@media only screen and (max-width: 992px){
  .my-table{
    // css 
 }
}

但是如果你使用的是 bootstrap-vue，你也可以传递 'responsive' 属性。

 <b-table responsive hover striped :items="items" class="position-relative"></b-table>

Vue.js screen size responsiveness