使用Boostrap網格來改變樣式。

Question

我試圖學習如何使用Bootstrap Grid，但無法弄清楚如何以不同的大小設置不同的元素。我想根據屏幕的大小更改div的位置和顏色漸變的方向。我做了3個代碼來幫助可視化。

<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

爲了達到預期的結果，使用媒體查詢作爲下面提到

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; 
} 


    } 

Answer 2

它不起作用，因爲該元素具有類無論屏幕大小和應用最後普遍存在的造型。要根據屏幕大小實際應用樣式，您需要使用媒體查詢，而不是依賴Bootstrap。實際上，Bootstrap內部使用媒體查詢來更改您正在使用的屏幕大小類別的樣式。