gpt4 book ai didi

css - 获取具有不同背景颜色并延伸到屏幕边缘的两列

转载 作者:行者123 更新时间:2023-11-28 09:57:03 26 4
gpt4 key购买 nike

<分区>

不是 this 的副本.

我试图在网页上创建两列,它们具有延伸到屏幕边缘的不同背景颜色。但是列的内容需要保持在 bootstrap 盒装宽度内。

它应该是这样的: enter image description here

我找到了 this answer这几乎可以工作,但内部内容在盒装宽度内没有正确对齐,尤其是在超过 1600 像素的大屏幕上。它基本上最终看起来像:

enter image description here

下面是最接近它的代码片段,它可能完全是错误的方法:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="background: bisque;">
<div class="row">
<div class="col-xs-12">
<h1>Normal Boxed Width</h1>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="background-color: aquamarine; padding: 0">
<div>
<div class="col-sm-8 col-sm-offset-1">
<h1>Left Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
</div>
<div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
<h1>Right Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
</div>
</div>
</div><!-- .row -->
</div><!-- .container-fluid -->

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com