邊框半徑和框陰影未按預期工作

Question

我在我的項目中使用 bootstrap-vue，並且我使用的是響應式網格。 我為不同的觀點使用了不同的 cols 大小。 我在向<b-row>的內容添加背景、邊框半徑和框陰影時遇到問題，因為<b-row>的寬度大於所有列的寬度。 所以我為每一列添加了背景，它的工作正常（我不確定它的正確方法）。 我使用相同的方法添加邊框半徑。 它工作正常，直到cols在小型設備中相互堆疊。 我無法讓 box-shadow 適用於任何設備尺寸。 有什么方法可以將內容包裝在<b-row>中，並將邊框半徑和框陰影以及背景添加到包裝器中。

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

Answer 1

您需要使用@media query來解決您的問題。 我建議避免使用內聯樣式。