边框半径和框阴影未按预期工作

Question

I am using bootstrap-vue in my project and I am using the responsive grid. I have used different cols sizes for different view points. I am having a issue to add background, border-radius and box-shadow to the content of the <b-row> , since width of the <b-row> is more than the width of all columns. So I add the background for each column and its working fine (I am not sure its the correct way to do it). I used the same method to add the border-radius. Its working fine in until cols get stacked each other in small devices. I couldn't make box-shadow working for any device size. Is there any way I can wrap the content inside the <b-row> and add border-radius and box-shadow and the background to the wrapper.

example https://codesandbox.io/s/intelligent-goldstine-wwpng?file=/src/components/HelloWorld.vue

Answer 1

You need to use @media query to resolve your issue. and I suggest avoid to use inline style.