Twitter bootstrap: 1200px büyük ekrandan nasıl kurtulun?

Question

Eğer bakarsanız: http://twitter.github.com/bootstrap/scaffolding.html#responsive Neredeyse her cihaz için kategorileri vardır. Geçen destek cihazı girişini ortadan kaldırmak istiyoruz: my css bilgisi sınırlı yani

Large display 1200px and up 70px 30px 

Ben bir arka uç programcı değil, bir tasarımcı değilim. Birisi bana büyük ekran desteğinden kurtulmak için değiştirmem gereken dosyalara yönlendirebilir mi?

Teşekkürler!

Answer 1

bu önyükleme-responsive.css hattı 437 tarihinden itibaren zor değildi Tamam (bunu neden kimse merak eğer PS, bu kurumsal standart falan filan 1024px filan. Var), Bu bölümün tamamını kaldırın:

@media (min-width: 1200px) { 
... 
} 

Şimdi sadece bu bu bir satır

@media (max-width: 979px) { 

değiştirin:

@media (min-width: 1200px) { 

easy hack!

DÜZENLEME daha iyi açıklama:

Eğer önyükleme-responsive.css bakarsanız, ve siz "Medya Sorgular" temelde aşağıdaki anahat sol olurdu hariç tüm bok bakmak:

/* Landscape phones and down */ 
    @media (max-width: 480px) { ... } 

    /* Landscape phone to portrait tablet */ 
    @media (max-width: 767px) { ... } 

    /* Portrait tablet to landscape and desktop */ 
    @media (min-width: 768px) and (max-width: 979px) { ... } 

    /* Desktop */ 
    @media (max-width: 979px) { ... } 

    /* Large desktop */ 
    @media (min-width: 1200px) { ... } 

Yavaş yavaş nasıl ölçeklendiğine bakın? Yaptığım şey, son bölümü kaldırmak, sonra orayı almak için 2'yi değiştirdi.

DÜZENLEME: Eğer boostrap özelleştirme sihirbazını kullanın eğer

BTW, sen büyük monitör desteği seçimini kaldırarak kendi GUI üzerinde yapabilirsiniz.

Answer 2

Buna bir alternatif de, 1200px ızgara değişkenlerini normal ızgara değerleri için bu değerlere ayarlanmasıdır. Bu yöntemle, kaynağı güncellemekten ve yükseltme sorunlarından kaçınabilirsiniz:

@ gridColumnWidth1200: 60px;

@ gridGutterWidth1200: 20px;

Answer 3

En henüz sadece kaldırın:

@media (min-width: 1200px) { ... } 

ve bootstrap maxcdn sürümünü kullanıyorsanız ya da sadece dokunmak istemiyorum Eğer tüm masaüstü

Answer 4

boyutları için bu sadece bir @media (max-width: 979px) için biçimlendirme kullanacak kaynak, sadece bootstrap stil sayfasını yükledikten sonra aşağıdaki css yapıştırın.

@media (min-width: 1200px) { 
    .container, 
    .navbar-static-top .container, 
    .navbar-fixed-top .container, 
    .navbar-fixed-bottom .container { 
     width: 940px; 
    } 
    .row-fluid { 
     width: 100%; 
     *zoom: 1; 
    } 
    .row-fluid:before, 
    .row-fluid:after { 
     display: table; 
     content: ""; 
     line-height: 0; 
    } 
    .row-fluid:after { 
     clear: both; 
    } 
    .row-fluid [class*="span"] { 
     display: block; 
     width: 100%; 
     min-height: 30px; 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     box-sizing: border-box; 
     float: left; 
     margin-left: 2.127659574468085%; 
     *margin-left: 2.074468085106383%; 
    } 
    .row-fluid [class*="span"]:first-child { 
     margin-left: 0; 
    } 
    .row-fluid .controls-row [class*="span"] + [class*="span"] { 
     margin-left: 2.127659574468085%; 
    } 
    .row-fluid .span12 { 
     width: 100%; 
     *width: 99.94680851063829%; 
    } 
    .row-fluid .span11 { 
     width: 91.48936170212765%; 
     *width: 91.43617021276594%; 
    } 
    .row-fluid .span10 { 
     width: 82.97872340425532%; 
     *width: 82.92553191489361%; 
    } 
    .row-fluid .span9 { 
     width: 74.46808510638297%; 
     *width: 74.41489361702126%; 
    } 
    .row-fluid .span8 { 
     width: 65.95744680851064%; 
     *width: 65.90425531914893%; 
    } 
    .row-fluid .span7 { 
     width: 57.44680851063829%; 
     *width: 57.39361702127659%; 
    } 
    .row-fluid .span6 { 
     width: 48.93617021276595%; 
     *width: 48.88297872340425%; 
    } 
    .row-fluid .span5 { 
     width: 40.42553191489362%; 
     *width: 40.37234042553192%; 
    } 
    .row-fluid .span4 { 
     width: 31.914893617021278%; 
     *width: 31.861702127659576%; 
    } 
    .row-fluid .span3 { 
     width: 23.404255319148934%; 
     *width: 23.351063829787233%; 
    } 
    .row-fluid .span2 { 
     width: 14.893617021276595%; 
     *width: 14.840425531914894%; 
    } 
    .row-fluid .span1 { 
     width: 6.382978723404255%; 
     *width: 6.329787234042553%; 
    } 
    .row-fluid .offset12 { 
     margin-left: 104.25531914893617%; 
     *margin-left: 104.14893617021275%; 
    } 
    .row-fluid .offset12:first-child { 
     margin-left: 102.12765957446808%; 
     *margin-left: 102.02127659574467%; 
    } 
    .row-fluid .offset11 { 
     margin-left: 95.74468085106382%; 
     *margin-left: 95.6382978723404%; 
    } 
    .row-fluid .offset11:first-child { 
     margin-left: 93.61702127659574%; 
     *margin-left: 93.51063829787232%; 
    } 
    .row-fluid .offset10 { 
     margin-left: 87.23404255319149%; 
     *margin-left: 87.12765957446807%; 
    } 
    .row-fluid .offset10:first-child { 
     margin-left: 85.1063829787234%; 
     *margin-left: 84.99999999999999%; 
    } 
    .row-fluid .offset9 { 
     margin-left: 78.72340425531914%; 
     *margin-left: 78.61702127659572%; 
    } 
    .row-fluid .offset9:first-child { 
     margin-left: 76.59574468085106%; 
     *margin-left: 76.48936170212764%; 
    } 
    .row-fluid .offset8 { 
     margin-left: 70.2127659574468%; 
     *margin-left: 70.10638297872339%; 
    } 
    .row-fluid .offset8:first-child { 
     margin-left: 68.08510638297872%; 
     *margin-left: 67.9787234042553%; 
    } 
    .row-fluid .offset7 { 
     margin-left: 61.70212765957446%; 
     *margin-left: 61.59574468085106%; 
    } 
    .row-fluid .offset7:first-child { 
     margin-left: 59.574468085106375%; 
     *margin-left: 59.46808510638297%; 
    } 
    .row-fluid .offset6 { 
     margin-left: 53.191489361702125%; 
     *margin-left: 53.085106382978715%; 
    } 
    .row-fluid .offset6:first-child { 
     margin-left: 51.063829787234035%; 
     *margin-left: 50.95744680851063%; 
    } 
    .row-fluid .offset5 { 
     margin-left: 44.68085106382979%; 
     *margin-left: 44.57446808510638%; 
    } 
    .row-fluid .offset5:first-child { 
     margin-left: 42.5531914893617%; 
     *margin-left: 42.4468085106383%; 
    } 
    .row-fluid .offset4 { 
     margin-left: 36.170212765957444%; 
     *margin-left: 36.06382978723405%; 
    } 
    .row-fluid .offset4:first-child { 
     margin-left: 34.04255319148936%; 
     *margin-left: 33.93617021276596%; 
    } 
    .row-fluid .offset3 { 
     margin-left: 27.659574468085104%; 
     *margin-left: 27.5531914893617%; 
    } 
    .row-fluid .offset3:first-child { 
     margin-left: 25.53191489361702%; 
     *margin-left: 25.425531914893618%; 
    } 
    .row-fluid .offset2 { 
     margin-left: 19.148936170212764%; 
     *margin-left: 19.04255319148936%; 
    } 
    .row-fluid .offset2:first-child { 
     margin-left: 17.02127659574468%; 
     *margin-left: 16.914893617021278%; 
    } 
    .row-fluid .offset1 { 
     margin-left: 10.638297872340425%; 
     *margin-left: 10.53191489361702%; 
    } 
    .row-fluid .offset1:first-child { 
     margin-left: 8.51063829787234%; 
     *margin-left: 8.404255319148938%; 
    } 
} 

Temel olarak, 1200px için 960px css'yi zorlar.

Answer 5

Bootstrap CSS dosyalarını kesmeye veya güncellemeye gerek yoktur. Daha fazla büyümek için konteynırı kısıtlayarak etkileri devre dışı bırakabilirsiniz.Kullan: $grid-gutter-width değişti sürece

.container-fluid, 
.container { 
    // Disable large-desktop breakpoint. 
    max-width: $container-md; 
} 

$container-md değeri, genellikle 970px olduğunu. LESS için @ ile $ değişkenlerini değiştirin. Düzenli CSS için, değişkeni sabit kodlanmış piksel büyüklüğü ile değiştirin.