如何解决CSS:突破类似Bootstrap的网格系统
我需要构建一个模板,该模板的背景左侧(与页面背景颜色不同)一直扩展到左侧页面的边缘,并且仍位于8之12自举列(container>row>col-8
)。然后右侧的4列无背景。所有这些美丽都需要响应式引导列(在移动屏幕上彼此堆叠)。我不能使用液体容器(宽度为100%),因为内容必须在12列的内部,并在左侧留有填充物。
有人知道有什么好的,干净的例子吗?
我不喜欢使用::before
伪元素,但是如果这是唯一的方法,那么我将不得不使用它。
查看我需要的屏幕截图。紫色是向左扩展的背景,白色是页面背景。黄色是12列的网格。
解决方法
会像重置容器的剩余边距一样简单吗?
<div class="container ml-0">
<div class="row">
<div class="col-sm-8">8 Cols</div>
<div class="col-sm-4">4 Cols</div>
</div>
</div>
演示: https://jsfiddle.net/davidliang2008/o4vsftpy/28/
,您可以使用css Gradient 属性。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。