[英]Display two divs next to each others, then one under the others with two different SCSS files
I have this HTML :我有这个 HTML:
<div className="tab-header">
<div className="container-header-comp">
<div className="header-comp">some-text</div>
</div>
<div className="header-options">
<div className="header-options-text">some-text</div>
</div>
</div>
Pretty simple.很简单。 I have two SCSS files, one for each of the two responsive designs of my app (page.scss and page-responsive.scss)
我有两个 SCSS 文件,一个用于我的应用程序的两个响应式设计(page.scss 和 page-responsive.scss)
I want to display "container-header-comp" and "header-options" next to each other, so my page.scss looks like this (and works great) :我想显示“container-header-comp”和“header-options”彼此相邻,所以我的 page.scss 看起来像这样(并且效果很好):
.tab-header {
display: grid;
grid-template-columns: 1fr 1fr;
}
Now, if I want to display the same classes, but instead of next to each other I want them one below the other for my responsive design.现在,如果我想显示相同的类,但不是彼此相邻,我希望它们一个在另一个下面以用于我的响应式设计。 So in page-responsive.scss I simple did this :
所以在 page-responsive.scss 我简单地做了这个:
.tab-header{
grid-template-columns : 1fr;
}
Since it is in another file, that styling doesn't apply to my classes (Unless I apply !important which I don't want to do).由于它位于另一个文件中,因此该样式不适用于我的类(除非我应用 !important ,但我不想这样做)。 How can I achieve this trick with my two scss files ?
我怎样才能用我的两个 scss 文件实现这个技巧?
try with尝试
@media only screen and (max-width: 600px) {
{
....
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.