Bootstrap - размер конкретного столбца

Question

Я не знаю, как сделать этот тип col 3 и 6.

Средний столбец не имеет отступы, но не достаточно.

Я пытался сделать разные размеры col.

@media (min-width:992px){ 
    .col-md-6 { width: 52,5641%;} 
    .col-md-3 { width: 23,7179%;} 
} 

но без успеха.

Answer 1

С помощью Bootstrap вам не нужно добавлять media queries или свой собственный width, просто используйте систему сетки BS (you can read more here) и дайте ей обработать всю трудную работу. Основываясь на вашей картине расположение 3 колонки будет использовать что-то вроде этого:

<div class="row"> 
     <div class="col-md-3">.col-md-3</div> 
     <div class="col-md-6">.col-md-6</div> 
     <div class="col-md-3">.col-md-3</div> 
    </div> 

Убедитесь, что вы столбцы всего 12, как и выше (3 + 6 + 3) Если требуется дополнительное заполнение в между колоннами просто добавьте вложенный DIV и примените расстояние, которое вы хотите к ним.

<div class="row"> 
     <div class="col-md-3"> 
     <div class="myclass"> 
      this will have extra padding 
     </div> 
     </div> 
     <div class="col-md-6">.col-md-6</div> 
     <div class="col-md-3">.col-md-3</div> 
    </div> 

    .myclass { 
    padding: 20px; 
    } 

Обновлено

Основываясь на ваш комментарий, если вы хотите, столбец 6, чтобы быть немного больше, чем вам нужно будет либо расширить этот столбец и «сжиматься», 2 внешних колонок на что-то вроде этого :

<div class="row"> 
     <div class="col-md-2">.col-md-2</div> 
     <div class="col-md-8">.col-md-8</div> 
     <div class="col-md-2">.col-md-2</div> 
    </div> 

Если это не то, что вы собираетесь делать, тогда вы можете создать свой собственный стол в бутстрапе.

<div class="row"> 
     <div class="custom-col">My custom left side</div> 
     <div class="custom-main">my main column</div> 
     <div class="custom-col">My custom right side</div> 
    </div> 

Размеры каждого столбца по мере необходимости.

Answer 2

Возможно, Bootstrap не самый лучший вариант для вашей проблемы. Он работает, если вы можете разделить экран на 12 равных частей. Переписать это правило может сломать другие вещи.

А как насчет использования гибких или других фреймворков CSS?