我有一个博客页面,我正在使用col-md-8
,在col-md-8
里面,我的内容存在,但是我想将我的一个div拉伸到col-md-8
中的全角。我的页面
我想伸展它, 我的代码:
.joinUs {
width: 100vw;
margin-left: -33.333333%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="article--publishedDate smallText text-uppercase">
Published : 02 June 2019
</div>
<div class="article--topDescription mt-54px">
In the above video, I have talked about top font management apps for Windows and Mac OS. Most of the Windows Font Management apps are Free and for Mac most of them are paid. I have talked about the top apps for Windows and Mac.
</div>
// I wanna make it stretch to full width of the browser
<div class="joinUs">
<div class="row">
<div class="col-md-8">
<div class="sectionTitle allCaps-Bold">
<span>Start learning for FREE Today - Visual Design Class</span>
</div>
</div>
<div class="col-md-4">
<div class="joinUs--title">
Join my community of <span>41257</span> students from <span>170</span> countries worldwide.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
但这不起作用
请帮助我,我被困住了
答案 0 :(得分:1)
检查。希望这可以帮助。 有两种方法可以实现,
/*Container style is for illustration purpose only */
.container {
background: gray;
min-height: 400px; margin-bottom: 100px;
}
/*Can achive using vw css unit*/
.row-full {
width: 100vw;
position: relative;
margin-left: -50vw;
height: 100px;
margin-top: 100px;
left: 50%;
}
/*<!--- 2nd way --> */
.content_box {
padding: 54px 0 21px;
color: #fff;
background-color: #88bae1;
margin-bottom: 145px;
position: relative;
z-index: -1;
}
.content_box:before {
content: "";
position: absolute;
height: 100%;
left: -3000px;
right: -3000px;
background-color: #88bae1;
z-index: -1;
top: 0;
bottom: 0;
width: auto !important;
}
<div class="container">
<div class="row" style="height:100px; background: #fff;"> this is ok</div>
<div class="row row-full" style="height:100px; background: #f00;">
this should take 100% width
</div>
</div>
<!--- 2nd way -->
<div class="content_box">
<div>Lorem ipsum</div>
</div>
解决问题的方法
.joinUs:before {
content: "";
position: absolute;
height: 100%;
left: -3000px;
right: -3000px;
background-color: #ebf0f8;
z-index: -1;
top: 0;
bottom: 0;
width: auto !important;
}
和body{overflow-x: hidden;}
答案 1 :(得分:1)
几次尝试后,我找到了解决方法:
asFormField
.joinUs {
width: calc(100vw - 50px);
margin-left: -27%;
padding: 20px 15px;
}
的问题在于百分比基于容器的宽度,在这种情况下,该宽度是您的margin-left: -33.333333%;
,而不是视口。此外,由于col-md-8
,子元素row
将宽度扩展了30px
,这可能导致页面上的水平滚动条。为了避免滚动条,我添加了margin-left: -15px; and margin-right: -15px;
,将负边距乘以padding: 20px 15px;
。
浏览您的网站时,我发现您正在覆盖Bootstrap的原始类。永远不要那样做!
代替始终创建自己的课程