Как настроить ширину столбцов Bootstrap?

у меня есть это, но я чувствую, что 4 слишком велик для моей ширины боковой панели, а 3 слишком мал (он должен добавить до 12).

  <div class="col-md-8">
  <div class="col-md-4">

Я пробовал это, но это не работает:

  <div class="col-md-8.5">
  <div class="col-md-3.5">

есть ли другой способ, чтобы получить аналогичный результат?

Спасибо за вашу помощь!

16
css multiple-columns sidebar twitter-bootstrap

5 ответов

чтобы развернуть ответ @isherwood, вот полный код для создания пользовательского -sm- ширина в Bootstrap 3.3

В общем, вы хотите найти существующую ширину столбца (скажем col-sm-3) и скопируйте все стили, которые применяются к нему, включая общие, в пользовательскую таблицу стилей, где вы определяете новые ширины столбцов.

.col-sm-3half, .col-sm-8half {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .col-sm-3half, .col-sm-8half {
        float: left;
    }
    .col-sm-3half {
        width: 29.16666667%;
    }
    .col-sm-8half {
        width: 70.83333333%;
    }
}
18

для сетки из 12 столбцов, если вы хотите добавить половину столбца (4,16667%) к ширине каждого столбца. Это то, что ты делаешь.

например, для col-md -X, определить .col-md -X-5 со следующими значениями. 

.col-md-1-5 { width: 12,5%; } // = 8,3333 + 4,16667
.col-md-2-5 { width: 20,83333%; } // = 16,6666 + 4,16667
.col-md-3-5 { width: 29,16667%; } // = 25 + 4,16667
.col-md-4-5 { width: 37,5%; } // = 33,3333 + 4,16667
.col-md-5-5 { width: 45,83333%; } // = 41,6667 + 4,16667
.col-md-6-5 { width: 54,16667%; } // = 50 + 4,16667
.col-md-7-5 { width: 62,5%; } // = 58,3333 + 4,16667
.col-md-8-5 { width: 70,83333%; } // = 66,6666 + 4,16667
.col-md-9-5 { width: 79,16667%; } // = 75 + 4,16667
.col-md-10-5 { width: 87,5%; } // = 83,3333 + 4,16667
.col-md-11-5 { width: 95,8333%; } // = 91,6666 + 4,16667

я округлил некоторые значения.

во-вторых, чтобы избежать копирования кода css из исходного col-md -X, использовать их в объявлении класса. Будьте осторожны, что они должны быть добавлены до ваш модифицированные. Таким образом, только ширина получает переопределение.

<div class="col-md-2 col-md-2-5">...</div>
<div class="col-md-5">...</div>
<div class="col-md-4 col-md-4-5">...</div>

наконец, не забывайте, что общая сумма не должна превышать 12 столбцов, которые составляют 100%.

надеюсь, это поможет!

13

вы, безусловно, можете создать собственные классы:

.col-md-3point5 {width: 28.75%}
.col-md-8point5 {width: 81.25%;}

Я бы сделал это, прежде чем я буду возиться с столбцами по умолчанию. Вы можете использовать те, что внутри.

вы, вероятно, также захотите поместить их в инструкцию media query, чтобы они применялись только для размеров экрана больше, чем мобильный.

6

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

.col-md-8{
  width: /*as you wish*/;
}

затем установите для этого медиа-запрос, как в:

@media screen and (max-width:768px){
  .col-md-8{
     width:99%;
   }
}
2

Вы можете использовать собственный столбец Bootstrap mixins make-xx-column():

.col-md-8half {
    .make-md-column(8.5);
}

.col-md-3half {
    .make-md-column(3.5);
}
2