2012-07-07 13 views
9

यदि आप देखें: http://twitter.github.com/bootstrap/scaffolding.html#responsive उनके पास लगभग हर डिवाइस के लिए श्रेणियां हैं। मैं पिछले समर्थन डिवाइस प्रविष्टि को खत्म करना चाहते हैं:ट्विटर बूटस्ट्रैप: 1200 पीएक्स बड़े प्रदर्शन से कैसे छुटकारा पाएं?

Large display 1200px and up 70px 30px 

मैं एक बैकएंड प्रोग्रामर, नहीं एक डिजाइनर हूँ तो मेरे सीएसएस ज्ञान सीमित है। क्या कोई मुझे उन फ़ाइलों पर इंगित कर सकता है जिन्हें बड़े प्रदर्शन के लिए समर्थन से छुटकारा पाने के लिए संशोधित करने की आवश्यकता होगी?

धन्यवाद!

उत्तर

9

ठीक है यह है कि कठिन बूटस्ट्रैप-responsive.css की लाइन 437 से शुरू होने वाले नहीं था, (पी एस यदि किसी कारण है कि मैं यह कर होगा सोच रहा है, यह कॉर्पोरेट मानक, ऐसा ऐसा 1024px गुणा, ऐसा। है), इस पूरे अनुभाग निकालें:

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

अब बस इस एक पंक्ति

@media (max-width: 979px) { 

इस बदलें:

@media (min-width: 1200px) { 

आसान हैक!

संपादित बेहतर स्पष्टीकरण:

आप बूटस्ट्रैप-responsive.css को देखें, तो और आप "मीडिया के प्रश्नों" आप मूल रूप से निम्नलिखित रूपरेखा के साथ नहीं छोड़ा जा सकता था छोड़कर सभी बकवास देखो:

/* 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) { ... } 

देखें कि यह धीरे-धीरे कैसे बढ़ता है? मैंने जो किया वह अंतिम खंड को हटा दिया गया है, फिर इसे स्थानांतरित करने के लिए 2 से आखिरी बार बदल दिया गया है।

संपादित करें:

BTW, अगर आप बूटस्ट्रैप अनुकूलन विज़ार्ड का उपयोग, तो आप इस उनके जीयूआई पर बड़े मॉनीटर समर्थन अचयनित करके कर सकते हैं।

+0

मुझे आपके परिवर्तन को समझ में नहीं आता है। 1200 पीएक्स से छोटे उपकरणों के बारे में क्या? – Sherbrow

+0

मैं एक संपादन के साथ अद्यतन करूँगा ... –

+0

टैट व्याख्यात्मक लॉल – worenga

3

इसका एक विकल्प नियमित ग्रिड मूल्यों के लिए उन मानों पर 1200px ग्रिड चर सेट कर रहा है। इस विधि के साथ आप स्रोत को अपडेट करने से बच सकते हैं और अपग्रेड समस्याओं से बच सकते हैं:

@ ग्रिड कॉलमविड्थ 1200: 60 पीएक्स;

@ ग्रिड गटर Width1200: 20px;

5

बेस्ट अभी तक सिर्फ निकालें:

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

और यह केवल हमेशा के लिए सभी डेस्कटॉप आकार

9

आप बूटस्ट्रैप के maxcdn संस्करण उपयोग कर रहे हैं या सिर्फ छूना चाहता हूँ न तो @media (max-width: 979px) के लिए स्वरूपण का उपयोग करेगा स्रोत, बस बूटस्ट्रैप स्टाइलशीट लोड करने के बाद निम्न सीएसएस रखें पेस्ट करें।

@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%; 
    } 
} 

असल में यह 1200 पीएक्स के लिए 960px सीएसएस लागू करता है।

+0

940 मेरे लिए बहुत छोटा था, इसलिए मैंने इसे चौड़ाई में बदल दिया: 1003 पीएक्स; और यह महान काम कर रहा है। जवाब के लिए धन्यवाद। – AMB

4

बूटस्ट्रैप सीएसएस फ़ाइलों को हैक या अद्यतन करने की कोई आवश्यकता नहीं है। आप आगे बढ़ने के लिए कंटेनर को रोककर प्रभाव को अक्षम कर सकते हैं।का उपयोग करें:

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

$container-md मूल्य, आम तौर पर 970px है जब तक आप $grid-gutter-width बदल दिया है। कम के लिए, @ वाले चर के $ को प्रतिस्थापित करें। नियमित सीएसएस के लिए, चर को कोडित पिक्सेल आकार के साथ बदलें।

+1

सहमत हैं, हालांकि यह हमेशा संभव नहीं था। एक आधुनिक उत्तर के लिए उन्नयन! –

संबंधित मुद्दे