Hello, I was just puzzled by the problem, there is a bootstrap mesh.

<div class="container"> <div class="col-md-6"> <div class="content1">123</div> </div> <div class="col-md-6"> <div class="content2">123</div> </div> </div>

So, at max-width = 1200, you need under .content1 to add a strip leading from the left edge of the browser window to the end of the text inside it, and you need to add a background at .content2 so that it is pressed against the right edge of the window. Look

Help, the atoms seem to be a simple problem, but their brains do not cook

  • should this be done using bootstrap? and for better understanding add the markup to the snippet,. - user33274
  • Yes, all the same, the main thing is that it was adaptive, so I was puzzled as the net of the bootstrap prevents it from being done) I did it even before and position: absolute, but when the screen size was changed, the strip width was not enough - DirKraft
  • add an example to snippet, otherwise they close - user33274
  • your markup doesn’t match your screenshot - there’s obviously no 50/50 - soledar10
  • Well, I just wrote for an example, it is clear that the grid goes around 8 and 4, I just have a problem with the strip behind the net - DirKraft

1 answer 1

 section { position: relative; } .content-right { position: absolute!important; top: 0; right: 0; } .content1 h2{ position: relative; } .content1 h2:before { content: ''; position: absolute; top: 100%; right: 100%; width: 100%; height: 3px; background: orange; } .content1 h2 > span { border-bottom: 3px solid orange } .content2 { padding: 15px; background: #ddd; } @media screen and (max-width: 992px) { .content-right { position: relative!important; top: 0; right: 0; } } 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="jumbotron"> <h1>Twitter Bootstrap 3.0</h1> <p class="lead">Starter template with CSS and JS included.</p> <p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a></p> </div> </div> <section class="clearfix"> <div class="container"> <div class="row"> <div class="col-md-8 col-sm-8"> <div class="content1"> <h2><span>Так вот, у контейнера</span></h2> <p>Так вот, у контейнера max-width=1200, нужно под .content1 добавить полоску ведущую от левого края окна браузера и до конца текста внутри него, и нужно добавить фон у .content2 так чтобы он был прижат к правому краю окна. Посмотреть</p> </div> </div> <div class="col-md-4 col-sm-4 content-right"> <div class="content2"> <h3>Так вот, у контейнера</h3> <p>Так вот, у контейнера </p> </div> </div> </div> </div> </section>

  • Thank you so much :) - DirKraft