具有背景色的Bootstrap全宽边栏

Question

我有布局像这样的图像

问题？ 如何在左侧部分制作全角紫色背景？ 这是我的代码

HTML：

<section id="screens-eight" class="clearfix">
    <div class="container">
        <div class="row">
            <div class="col-md-6 screens-eight-left">
                <div class="screens-eight-bg"></div>
                <p>
                    Ut Enim ad minim veniam quis nostrud exercitation ullamco laboris. Nisi ut aliquip ex ea commodo
                </p>
            </div>
        </div>
    </div>
</section>

CSS：

#screens-eight {
    background: blue; 
    padding-bottom: 180px;
}
.screens-eight-left {
    background: #835fa8; 
    position: relative; 
    z-index: 0; padding-bottom: 
    80px; padding-top: 80px;
}

@media(min-width: 992px) {
    .screens-eight-left .screens-eight-bg {
    background: #835fa8; 
    left: 0; position: 
    absolute; top: 0; 
    width: 50%; 
    z-index: -1;}
}

Answer 1

我在本地计算机上找到了解决方案。 请按照以下步骤操作。

HTML

<section id="screens-eight" class="clearfix">
        <div class="container">
            <div class="row">
                <div class="col-md-6 screens-eight-left">
                    <p>
                        Ut Enim ad minim veniam quis nostrud exercitation ullamco laboris. Nisi ut aliquip ex ea commodo
                    </p>
                </div>
            </div>
        </div>
    </section>

CSS

    #screens-eight {background: blue; padding-bottom: 180px;}
.screens-eight-left {position: relative; z-index: 0; padding-bottom: 80px; padding-top: 80px;}

@media(min-width: 992px) {
    .screens-eight-left .screens-eight-bg {background: #835fa8; left: 0; position: absolute; top: 0; width: 50%; z-index: -1;}
}

**现在在Photoshop中制作1张图像**

步骤1：-创建高度为1PX，宽度为3000PX的新图像步骤2：-用颜色代码＃835fa8填充左侧部分的50％。 因此，您剩下的50％的零件使用此颜色＃835fa8，右边的50％的零件为空白（透明）。 第3步：-现在将图像保存为png格式。

现在在此ID =“ screens-eight”中调用该png图片

所以你必须添加CSS

#screens-eight {
    background-image: url(line.png);
    background-position: center;
    background-repeat-y: repeat;
}

所以现在您更新的CSS如下

#screens-eight {background: blue;
    background-image: url(line.png);
    background-position: center;
    background-repeat-y: repeat;
    padding-bottom: 180px;
}
.screens-eight-left {position: relative; z-index: 0; padding-bottom: 80px; padding-top: 80px;}

@media(min-width: 992px) {
    .screens-eight-left .screens-eight-bg {background: #835fa8; left: 0; position: absolute; top: 0; width: 50%; z-index: -1;}
}

我还上传了我创建的图像，以便您了解。

Answer 2

您正在使用bootstrap .container类，该类限于使用媒体查询的特定网格系统 。

如果要到达屏幕的一侧，则必须使用.container-fluid然后在其中进行操作，或者使用某种CSS或javascript魔术方法将紫色框从容器中取出。

您可以嵌套和追逐容器，但是我不能保证它不会破坏任何东西。 玩这个：（摘自您的代码笔）。 然后，您将需要使用百分比或空格将lorem ipsum移动到所需位置。 （ 这是相同代码的代码笔 ）

<section id="screens-eight" class="clearfix">
  <div class="container-fluid">
     <h4>wide part of doc:</h4>
       <div class="row">
         <div class="col-md-6 screens-eight-left">
           <div class="screens-eight-bg"></div>
             <p>
                  Ut Enim ad minim veniam quis nostrud exercitation ullamco laboris. Nisi ut aliquip ex ea commodo
             </p>
           </div>
        </div>
      <div class="container">
        <h4>Sneaky narrow part of doc 1, a container within the wide container. May break something.</h4>
      </div>
   </div>
   <div class="container">
     <h4>Narrow part of doc 2.</h4>
   </div>
</section>

Answer 3

将类container更改为fluid-container

http://getbootstrap.com/css/#grid-example-fluid

Answer 4

在这里，尝试此代码

<section id="screens-eight" class="clearfix">

<div class="cover">

            <div class="container">
                <div class="row">
                    <div class="col-md-6 screens-eight-left">
                        <div class="screens-eight-bg"></div>
                        <p>
                            Ut Enim ad minim veniam quis nostrud exercitation ullamco laboris. Nisi ut aliquip ex ea commodo
                        </p>
                    </div>
                </div>
            </div>

            </div>


        </section>






.cover
{background: #835fa8; 
    float:left;


    width:100%;
    }


#screens-eight { padding-bottom: 180px; position:relative;}
.screens-eight-left {position: relative; z-index: 0; padding-bottom: 80px; padding-top: 80px;}