Question

问题？如何在左边的部分制作全宽紫色背景？这是my code

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 =＆＃34;屏幕-8＆＃34;

中调用该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类，该类使用媒体查询限制特定grid system。

如果您想要到达屏幕的一侧，您将需要使用.container-fluid然后在其中工作，或者使用某种css或javascript魔法将紫色框从容器中打破。< / p>

你可以嵌套和追逐容器，但我不能保证它不会破坏任何东西。玩这个游戏:(取自你的代码笔）。然后，您需要使用百分比或空格将您的lorem ipsum移动到您想要的位置。（Here is a codepen of the same code）

<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;}

Bootstrap全宽侧边栏与背景颜色

4 个答案: