0

Здравствуйте, озадачился просто проблемой, есть бутстрап сетка.

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

Так вот, у контейнера max-width=1200, нужно под .content1 добавить полоску ведущую от левого края окна браузера и до конца текста внутри него, и нужно добавить фон у .content2 так чтобы он был прижат к правому краю окна. Посмотреть

Помогите , ато проблема вроде простая, а мозги не варят

8
  • это надо сделать средствами bootstrap ? и для лучшего понимания добавьте разметку в сниппет ,.
    – user33274
    6 июл 2016 в 11:32
  • Да всё равно, главное чтобы адаптивно было, поэтому озадачился так как сетка бутстрап мешает это сделать) Я уже и через before и position: absolute делал, но при изменении размера экрана не хватает ширины полоски
    – DirKraft
    6 июл 2016 в 11:34
  • пример в снипет добавьте , а то закроют
    – user33274
    6 июл 2016 в 11:34
  • ваша разметка несоответствует вашему скриншоту - там явно нет 50/50
    – soledar10
    6 июл 2016 в 11:59
  • Ну я просто для примера написал, понятно что там сетка идет примерно 8 и 4, у меня просто проблема с самой полосой за сеткой
    – DirKraft
    6 июл 2016 в 12:35

1 ответ 1

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>

1
  • Спасибо огромное :)
    – DirKraft
    7 июл 2016 в 20:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.