Bootstrap как разместить объкты друг за другом

325

27 марта 2017, 06:53

Нужно сделать вот так ПРИ ПОМОЩИ BOOTSTRAP

А получается только так и только

*Карточка 12 колонок а полоса 2 колонки (я знаю что можно только 12 но не могу найти решения).

Answer 1

Не понятно что нужно, но например так:

.grey { 
  background: grey; 
  height: 100px; 
} 
 
.pink { 
  background: pink; 
  height: 300px; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
   
  <div class="container"> 
    <div class="row"> 
      <div class="col-xs-offset-5 col-xs-2"> 
        <div class="grey"></div> 
      </div> 
    </div> 
    <div class="row"> 
      <div class="col-xs-12"> 
        <div class="pink"></div> 
      </div> 
    </div> 
    <div class="row"> 
      <div class="col-xs-offset-5 col-xs-2"> 
        <div class="grey"></div> 
      </div> 
    </div> 
  </div>

Или так:

.grey { 
  background: grey; 
  height: 600px;   
} 
 
.pink { 
  background: pink; 
  height: 300px; 
} 
 
.row-rel { 
  position: relative; 
} 
 
.fix { 
  position: absolute; 
  left: 0; 
  right: 0; 
  top: 50%; 
  -webkit-transform: translateY(-50%); 
  -moz-transform: translateY(-50%); 
  -ms-transform: translateY(-50%); 
  -o-transform: translateY(-50%); 
  transform: translateY(-50%); 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
   
  <div class="container"> 
    <div class="row row-rel"> 
      <div class="col-xs-offset-5 col-xs-2"> 
        <div class="grey">           
            
        </div> 
      </div> 
       
      <div class="fix"> 
        <div class="row"> 
          <div class="col-md-12"> 
            <div class="pink"></div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div>