Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
474 views
in Technique[技术] by (71.8m points)

html - Enable bootstrap column backgrounds to bleed to edge of viewport

I'm trying to work out how to achieve the following in Bootstrap 3:

  1. I have a HTML page which is primarily based around bootstrap's fixed container grid.
  2. Half way down the page I want a row with columns of different sizes.
  3. I want the content (text / images) inside these columns to line up with the content inside the columns in the fixed container grid.
  4. I want the background colours of the left and right furthest columns to bleed right to the edge of the page.

It may help if I illustrate what I'm trying to achieve: Bootstrap column backgrounds bleeding to edge of viewport

Any help would be greatly appreciated!

Update: as requested here's some code examples of what I currently have: http://www.bootply.com/ZzOefJGRRq As you can see the text and columns in the fluid container are not lining up correctly.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Bootstrap 4

Use position absolute before or after elements with width: 50vw

Codepen

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      ...
    </div>
  </div>  
  <div class="row">
    <div class="col-lg-6 c-col-bg--red">
      ...
    </div>
    <div class="col-lg-6 c-col-bg--blue">
      ...
    </div>
  </div>
</div>

CSS

.container-fluid {
    max-width: 1000px;
}

@media (min-width: 992px) {
    div[class*="c-col-bg"] {
        position: relative;
    }

    div[class*="c-col-bg"]:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: -1;
        width: 50vw;
    }

    .c-col-bg--red:after {
        right: 0;
        background: red;
    }

    .c-col-bg--blue:after {
        left: 0;
        background: blue;
    }
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...