清潔CSS：使用gridsystem div的桌面，gridsystem之外的移動

我試圖讓我的標題是4種不同顏色下的一條線。清潔CSS：使用gridsystem div的桌面，gridsystem之外的移動

對於桌面我想它去與我的響應格：對於移動我想讓它去的全寬：現在

<header> 
<div class="container"> 
    <div class=" row"> 
     <div class="col-3 center"> 
      <img src="assets/arteveldelogo.png"> 
     </div> 
     <div class="col-9 hidden-sm right"> 
      <h1 class="font-heavy"> 
       Beeldbank Mediatheek Mariakerke 
      </h1> 
      <ul class="font-heavy"> 
       <li><a href="#"> Home </a></li> 
       <li><a href="#"> Collecties </a></li> 
       <li><a href="#"> Tentoonstellingen </a></li> 
       <li><a href="#"> Klassen </a></li> 
      </ul> 
     </div> 
    </div> 
</div> 
     <div class="line orangeline"></div> 
     <div class="line blueline"></div> 
     <div class="line magentaline"></div> 
     <div class="line greenline"></div> 
</header>

所以，我線AR我gridsystem外面，做工精細對於我的移動設計，只是不是我希望他們用於我的桌面的方式。當我將這些行放入.container中的.row時，它們將用於桌面設計，而不是用於移動設計。我的薩斯是

.line{ 
margin-top: 1rem; 
display:block; 
float:left; 
width: 25%; 
} 
.orangeline{ 
border-bottom: 1px solid $orange; 
@media only screen and (min-width:45em){ 
    border-bottom: 4px solid $orange; 
}

（藍線，magentaline & GREENLINE都是相同的，但有自己的colorvariable）

有沒有乾淨的方式做的（只使用CSS和HTML）？謝謝！

來源

2017-10-06 Annelien

1.使用引導2.創建四個相等的列3.設置高列被周圍'50px'。 4將每列設置爲不同的顏色。 – ZombieChowder

嘿謝謝你的回覆。這就是我爲我的桌面版所做的。只有4列在寬度爲80％的容器中（認爲bootstrap-container也可以這樣工作，我錯了嗎？），對於移動設備我希望它們是100％，所以將它們放在容器外。但要做出2個版本（一個「在-container'版本這是在桌面上和可見」出container'版本這是在移動設備上可見）在我的HTML似乎只是方式TOT髒。 – Annelien

你可以創建一個小提琴嗎？ – Aslam

你有沒有使用多站，線性漸變考慮？ browser support非常好，這種方法簡化了您的HTML到一個單一的元素。

:root { 
 
    --orange: #EE9900; 
 
    --blue: #00AACC; 
 
    --magenta: #CC0077; 
 
    --green: #BBCC00; 
 
} 
 

 
.line { 
 
    height: 3px; 
 
    background: linear-gradient(
 
    to right, 
 
    var(--orange) 25%, var(--blue) 25%, 
 
    var(--blue) 50%, var(--magenta) 50%, 
 
    var(--magenta) 75%, var(--green) 75% 
 
); 
 
} 
 

 
@media screen and (max-width: 400px) { 
 
    .line { 
 
    height: 1px;  
 
    } 
 
} 
 

 
/* No support for CSS variables? Fallback time */ 
 
@supports not(--test: green) { 
 
    .line { 
 
    background: linear-gradient(
 
     to right, 
 
     #EE9900 25%, #00AACC 25%, 
 
     #00AACC 50%, #CC0077 50%, 
 
     #CC0077 75%, #BBCC00 75% 
 
    );  
 
    } 
 
}

<div class="line" role="presentation">

https://jsfiddle.net/dx9gyn2s/

來源

2017-10-06 20:31:10

清潔CSS：使用gridsystem div的桌面，gridsystem之外的移動

回答

相關問題