Question

我正在尝试学习如何使用Bootstrap网格，但却无法确定如何在不同尺寸下对元素进行不同的样式设置。我想根据屏幕的大小更改div的位置和颜色渐变的方向。我做了3个codepens来帮助可视化。

<div class="container-fluid">
    <div class='col-md-3 col-xs-12'>
        <div id="header">Header</div>
        <div id="sidebar">Sidebar</div>
    </div>
    <div class='col-md-9 col-xs-12'>
       <div id="main">Main</div> </div>

</div>

这是中大屏幕应该是这样的。 https://codepen.io/tyl-er/pen/aWVpbN

.col-md-3 #header{
   background:linear-gradient(to right, yellow, green);
    height:25vh;
}
.col-md-3 #sidebar{
   background:linear-gradient(to right, yellow, green);
    height:75vh;
}
.col-md-9 #main {
    background: linear-gradient(to right, green , blue);
    height:100vh;
}

在超小屏幕上应该是这样的。 https://codepen.io/tyl-er/pen/bWYgdQ

.col-xs-12 #header{
   background:linear-gradient( red, yellow);
    height:25vh;
}
.col-xs-12 #sidebar{
   background:linear-gradient(yellow, green);
    height:25vh;
}
.col-xs-12 #main {
    background: linear-gradient(green , blue);
    height:50vh;
}

但是当我尝试组合代码时，它不起作用。

Answer 1

它不起作用，因为无论屏幕大小如何，元素都具有类，并且最后应用的样式占优势。要根据屏幕大小实际应用样式，您需要使用媒体查询而不是依赖Bootstrap。实际上，Bootstrap在内部使用媒体查询来更改您正在使用的屏幕大小类的样式。

Answer 2

要达到预期效果，请使用下面提到的媒体查询

COdepen- https://codepen.io/nagasai/pen/OmOWGe?editors=1100

 #header{
   background:linear-gradient( red, yellow);
    height:25vh;
}
 #sidebar{
   background:linear-gradient(yellow, green);
    height:25vh;
}
 #main {
    background: linear-gradient(green , blue);
    height:50vh;
}


 /* Small Devices, Tablets */
    @media only screen and (max-width : 320px) {

        #header{
   background:linear-gradient( red, yellow);
    height:25vh;
}
#sidebar{
   background:linear-gradient(yellow, green);
    height:25vh;
}
#main {
    background: linear-gradient(green , blue);
    height:50vh;
}


    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

        #header{
   background:linear-gradient(to right, yellow, green);
    height:25vh;
}
#sidebar{
   background:linear-gradient(to right, yellow, green);
    height:75vh;
}
#main {
    background: linear-gradient(to right, green , blue);
    height:100vh;
}


    }

使用Boostrap网格来改变样式。

2 个答案: