如何创建跨越屏幕边缘的两列不同背景颜色的列
问题:
您希望在网页上创建两列,每列都有不同的背景颜色,延伸到屏幕的边缘。但是,列的内容应保持在 Bootstrap 网格系统的固定宽度内。
解决方案:
使用 Bootstrap 5 Beta:
Bootstrap 中的概念仍然相似5:
- 在列上使用具有绝对位置的伪元素来创建容器流体中容器的错觉。
Bootstrap 5 示例Beta:
<div class="container-fluid"> <div class="row"> <div class="col-6 bg-info"> <div class="row justify-content-end"> <div class="col-9"> ... </div> </div> </div> <div class="col-6 bg-danger"> <div class="row justify-content-start"> <div class="col-9"> ... </div> </div> </div> </div> </div>
Bootstrap 5 的替代方案:
- 利用容器流体并在外列中插入较小的网格列,每个网格列带有它的背景颜色。
使用Bootstrap 4:
概念类似于 Bootstrap 5,但没有“-xs-”中缀。
Bootstrap 4 示例:
<div class="container-fluid"> <div class="row"> <div class="col-6 bg-info"> <div class="row justify-content-end"> <div class="col-9"> ... </div> </div> </div> <div class="col-6 bg-danger"> <div class="row justify-content-start"> <div class="col-9"> ... </div> </div> </div> </div> </div>
使用引导程序3:
将第二个容器包装在另一个包装器 DIV 中:
<div class="container"> <p><strong>在 Bootstrap 3 中使用伪元素:</strong></p> <pre class="brush:php;toolbar:false">.right:before { right: -999em; background: rebeccapurple; content: ''; display: block; position: absolute; width: 999em; top: 0; bottom: 0; }
以上是如何使用 Bootstrap 创建具有不同背景颜色的全屏两栏布局?的详细内容。更多信息请关注PHP中文网其他相关文章!

文章讨论了CSS保证金属性,特别是“保证金:40px 100px 120px 80px”,其应用程序以及对网页布局的影响。

本文讨论了CSS边境属性,重点是自定义,最佳实践和响应能力。主要论点:边境 - 拉迪乌斯(Border-Radius)对响应式设计最有效。

本文讨论了CSS中评论的使用,详细介绍了单线和多行评论语法。它认为注释可以增强代码可读性,可维护性和协作,但如果无法正确管理,可能会影响网站性能。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

禅工作室 13.0.1
功能强大的PHP集成开发环境

螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境