reinigen CSS: Verwenden Sie divs in gridsystem für Desktop, außerhalb von gridsystem für mobile

Ich versuche, einen Schlussstrich unter meine Überschrift zu machen, die 4 verschiedenen Farben ist.reinigen CSS: Verwenden Sie divs in gridsystem für Desktop, außerhalb von gridsystem für mobile

Für Desktop möchte ich es mit meinem reaktions Netz gehen: Für mobile möchte ich es in voller Breite gehen:

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

Also meine Linien-ar außerhalb meines gridsystem gerade jetzt, und adaequat für mein mobiles Design, einfach nicht so, wie ich es für meinen Desktop haben möchte. Wenn ich die Zeilen in einem .row setzen, die in einem .Behälter ist, arbeiten sie für desktopdesign, nicht für die mobile Design. My Sass ist

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

(blueline, magentaline & Greenline sind alle gleich, aber mit dort eigene colorvariable)

Gibt es eine saubere Art und Weise zu tun ist (nur CSS und HTML verwenden)? Danke!

Quelle

2017-10-06 Annelien

1. Verwenden Bootstrap 2. vier erstellen gleiche Spalten 3. Hoch der Säulen Set um '50px' zu sein. 4 Legen Sie für jede Spalte eine andere Farbe fest. – ZombieChowder

Hey vielen Dank für die Antwort. Das mache ich für meine Desktop-Version. Nur die vier Spalten in einem Behälter, der eine 80% ige Breite hat (man denke Bootstrap-Container auch so funktioniert, bin ich falsch?), Für mobile ich sie wollen 100% sein, so legte sie des Behälters aus. Aber 2 Versionen zu machen (eine 'In-Container'-Version, die auf dem Desktop sichtbar ist und eine' Out-Container'-Version, die auf dem Handy sichtbar ist) in meinem HTML scheint einfach total dreckig zu sein. – Annelien

Können Sie eine Geige erstellen? – Aslam

Haben Sie darüber nachgedacht, einen Multi-Stopp, linearen Gradienten? Die browser support ist ausgezeichnet, und dieser Ansatz vereinfacht Ihre HTML auf ein einzelnes Element.

: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/

Quelle

2017-10-06 20:31:10

reinigen CSS: Verwenden Sie divs in gridsystem für Desktop, außerhalb von gridsystem für mobile

Antwort

Verwandte Themen