干净的 CSS：在桌面的网格系统中使用 div，在移动的网格系统之外使用答案

【问题标题】：Clean CSS: Use divs in gridsystem for desktop, outside of gridsystem for mobile干净的 CSS：在桌面的网格系统中使用 div，在移动的网格系统之外使用
【发布时间】：2018-03-18 02:59:22
【问题描述】：

我正在尝试在我的标题下画一条线，它是 4 种不同的颜色。

对于桌面，我希望它与我的响应式网格一起使用：对于移动设备，我希望它是全角的：

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

所以我的线条现在在我的网格系统之外，并且适用于我的移动设计，但不是我希望它们适用于我的桌面的方式。当我将这些行放在 .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;
}

（蓝线、洋红和绿线都是一样的，但有自己的颜色变量）

有没有一种干净的方法（仅使用 css 和 html）？谢谢！

【问题讨论】：

1.使用 Bootstrap 2. 创建四个相等的列 3. 将列的高度设置为 50px 左右。 4 将每一列设置为不同的颜色。
您好，感谢您的回复。这就是我为我的桌面版本所做的。只有 4 列位于宽度为 80% 的容器中（认为 bootstrap-container 也可以这样工作，我错了吗？），对于移动设备，我希望它们为 100%，因此将它们从容器中取出。但是在我的 html 中制作 2 个版本（一个在桌面上可见的“容器内”版本和一个在移动设备上可见的“容器外”版本）似乎太脏了。
你能做一个小提琴吗？
@Annelien 查看如何使用 Bootstrap columns 您可以将它们设置为在移动设备和桌面设备中的外观不同
在这里做了一个小提琴：jsfiddle.net/uhw8L742/2 将使用引导程序检查可能性，谢谢！

标签： html css sass css-grid

【解决方案1】：

您是否考虑过使用多站线性渐变？ 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%
    );    
  }  
}

&lt;div class="line" role="presentation"&gt;

https://jsfiddle.net/dx9gyn2s/

【讨论】：