Quando você tenta usar a grade responsiva do Twitter Bootstrap com menos estrutura
responsive.less, including: {
variables.less,
mixins.less,
responsive-utilities.less,
responsive-1200px-min.less,
responsive-768px-979px.less,
responsive-767px-max.less,
responsive-navbar.less
}A parte responsiva entre 980 px e 1199 px não está definida. Sua grade terá uma aparência “ampla” para este tamanho de tela.
Normalmente adiciono um novo arquivo less para completar esta parte:
// responsive-980px-1199px.less
//
// Responsive: Small desktops
// --------------------------------------------------
@media (min-width: 980px) and (max-width: 1199px) {
// Fixed grid
#grid > .core(@gridColumnWidth980, @gridGutterWidth980);
// Fluid grid
#grid > .fluid(@fluidGridColumnWidth980, @fluidGridGutterWidth980);
// Input grid
#grid > .input(@gridColumnWidth980, @gridGutterWidth980);
}Apenas certifique-se de adicionar as variáveis relacionadas às suas variáveis .less (ou juste defini-las no topo deste novo arquivo)
// Default 940px grid
// -------------------------
[...]
// 980px-1199px
@gridColumnWidth980: 56px;
@gridGutterWidth980: 24px;
@gridRowWidth980: (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns - 1));
// Fluid grid
// -------------------------
[...]
// 980px-1199px
@fluidGridColumnWidth980: percentage(@gridColumnWidth980/@gridRowWidth980);
@fluidGridGutterWidth980: percentage(@gridGutterWidth980/@gridRowWidth980);Em seguida, você pode incluir facilmente seu arquivo recém-criado no arquivo principal responsive.less:
// MEDIA QUERIES
// ------------------
[...]
// Small desktops
@import "responsive-980px-1199px";
[...]No momento não me sinto preocupado com as minúcias do responsivo, então não acrescentei nada para consertar.
Mas se alguém tivesse que enfrentar essa parte, eu estaria interessado em saber se há algo a acrescentar!