Bootstrap.Как сохранить ширину колонки при вложении её в другую колонку?

Question

[jimmy_hendrix]

Есть такая структура:

<div class="container">
   <div class="row">
      <div class="col-xs-8">
           <div class="row">
               <div class="col-xs-2">Контент</div>
               <div class="col-xs-2">Контент</div>
               <div class="col-xs-2">Контент</div>
               <div class="col-xs-2">Контент</div>

           </div>
      </div>
      <div class="col-xs-4">Контент</div>
   </div>
</div>

Как сделать так чтобы блоки с классом "col-xs-2" имели размер равный тому,который бы они получили в случае нахождения непосредственно внутри дива с классом "container" ?

То есть такой размер который был бы у них , но в такой конструкции :

<div class="container">
   <div class="row">
    
               <div class="col-xs-2">Контент</div>
               <div class="col-xs-2">Контент</div>
               <div class="col-xs-2">Контент</div>
               <div class="col-xs-2">Контент</div>

               <div class="col-xs-4">Контент</div>
   </div>
</div>

Answer 1

[Глеб Кемарский]

Стандартная стека бутсрапа состоит из 12 колонок. Каждый ряд (row) делится на условные 12 частей, и col-xs-2 отхватывает две из них, col-xs-4 - четыре.

Во втором случае четыре маленьких блока находятся в одном ряду с большим. Здесь они делят 12 колонок на пятерых. Поэтому получается четыре блока по 2 колонки и один блок из 4 колонок. 4х2 + 1х4 = 12.

А в первом случае маленькие блоки завёрнуты в отдельный маленький ряд. Этот ряд тоже состоит из 12 условных частей, а маленькие блоки делят его поровну. Поэтому они должны быть не col-xs-2, а col-xs-3. Тогда 4х3 будет 12, и они займут маленький ряд целиком.

<div class="container">
   <div class="row">
      <div class="col-xs-8">
           <div class="row">
               <div class="col-xs-3">Контент</div>
               <div class="col-xs-3">Контент</div>
               <div class="col-xs-3">Контент</div>
               <div class="col-xs-3">Контент</div>
           </div>
      </div>
      <div class="col-xs-4">Контент</div>
   </div>
</div>