Променете решетката на Bootstrap на 16,67+66,67+20,67

Използвам Bootstrap за по-добър мобилен дизайн.

Използвам този модел на мрежата:

.col-md-2 (лента за навигация) .col-md-8 (съдържание)- col-md-2 (дясна колона) със следните размери на ширина:

16.66666667 % + 66.66666667 % + 16.66666667 %

Но бих искал да променя .col-md-2 в 2 различни размера като 10.66666667 + 22.66666667, така че ще имам 2 различни класа или е възможно да променя първия използван .col-md-2 клас и след това втория в моя по-късно интегриран css-файл, защото това класове са в различни css id. Опитах се да създам 2 собствени класа col-md, но това не проработи.

Моето решение във втория зареден css файл (не работи правилно)

#menu.col-md-2 {width:22.66666667%;}

#rechts.col-md-2 {width:10.66666667%;}

Общата witdh сега ще бъде твърде дълга, но трябва да съм като преди, защото добавям 6% към първия клас и изваждам 6% към втория клас.

Искам да променя размерите. Първата колона е кратка за 10-инчов таблет.


css twitter-bootstrap-3 grid-layout
person Grischa    schedule 17.11.2015    source източник
comment
Направи ли го? :)   -  person Alteyss    schedule 17.11.2015

Отговори (2)


arrow_upward
1
arrow_downward

Съветвам ви да създадете два различни класа и да ги приложите, както искате.

E.g : 

.col-md-2.specialCol1 {
// Special size
}
.col-md-2.specialCol2 {
// Special size 2 
}

Знаеш ли какво искам да кажа ?

РЕДАКТИРАНЕ

Предлагам ви да използвате тази поръчка:

.col-md-3 (navigation bar) .col-md-7 (content)- col-md-2 (right column)

Да се ​​фокусира върху съдържанието.

След това използвайте медийните заявки, за да адаптирате, напр. :

@media screen and (max-width: 640px) {
  .yourCol {
    // Your size
  }
}

Горният пример ще се прилага при ширина от 640px. Открийте какво ви трябва и приложете промените.

person Alteyss    schedule 17.11.2015
comment
Когато създам 2 нови класа, първата колона ще стане със 100% ширина. Прочетох, че това се дължи на стратегията за мобилни устройства на Bootstrap. - person Grischa; 17.11.2015
comment
А какво ще кажете за col-xs-n и col-sm-n за управление на това, което искате в ситуации на мобилен екран? - person Alteyss; 17.11.2015
comment
Би било идея с col-sm- за таблет, но не намерих желаните размери на ширина. - person Grischa; 17.11.2015
comment
Възможно ли е да накарате един прост JSFiddle да работи? Може да е по-лесно да правите неща ;) Приготвих го за вас jsfiddle.net/sog1oxuq - person Alteyss; 17.11.2015
comment
Нека продължим тази дискусия в чата. - person Grischa; 17.11.2015

arrow_upward
0
arrow_downward

Винаги предлагам да не променяте стандартните ширини на клас Bootstrap. Създайте свой собствен... Между другото, защо изобщо имате нужда от нещо подобно? 10.6666 наистина е близо до col-md-1, защо не го използвате? Pherapse можете да получите добър резултат, без да е необходимо да създавате персонализирани класове, а просто да работите с полета и подложки.

person RiccardoC    schedule 17.11.2015
comment
Първата колона е кратка за 10-инчов таблет. Бих могъл да използвам col-md-1, ако има трети клас witdh с пасва на 100%. - person Grischa; 17.11.2015
comment
Можете да поставите различни елементи, приложими към различни разделителни способности (col-md-2 col-sm-3 например), но това, което винаги мисля е, че ако ситуацията ще бъде твърде сложна, подходът не е правилният. Pheraps, които принуждавате към много съдържание на един ред - person RiccardoC; 17.11.2015