बूटस्ट्रैप - स्क्रीन का आकार छोटा होने पर पैडिंग या मार्जिन हटाना

Question 1

संपादित करें: शायद मुझे पूछना चाहिए कि स्क्रीन को 480px चौड़ाई से कम करने पर कौन सा चयनकर्ता साइड पैडिंग सेट करता है? मैं इसे खोजने के लिए थोड़ी देर के लिए बूटस्ट्रैप-रिस्पॉन्सिबिलिटी ब्राउज़ कर रहा हूं। लेकिन इस पर कोई असर नहीं पड़ता।

मूल मैं मूल रूप से छोटे डिवाइस स्क्रीन पर जवाबदेही के लिए किसी भी डिफ़ॉल्ट पैडिंग या मार्जिन सेट को हटाना चाहता हूं।

मैं एक है background colorपर ओवरराइट container-fluidचयनकर्ता और बड़ी स्क्रीन के लिए वे पूरी तरह से चौड़ाई में 100% प्रस्तुत करना है, लेकिन वे स्क्रीन छोटे आकार के लिए कम हो जाता है, डिफ़ॉल्ट रूप से, बूटस्ट्रैप पर एक मार्जिन या पैडिंग जोड़ने के लिए लगता है container-fluidया container।

<div class="container-fluid">
    <div class="row-fluid">
      test
    </div>
</div>

अगर मैं बूटस्ट्रैप की डिफ़ॉल्ट शैली को अधिलेखित करने के लिए कस्टम सीएसएस का उपयोग करता हूं, तो छोटे स्क्रीन पर इस पैडिंग को हटाने के लिए मुझे मीडिया क्वेरी या चयनकर्ता को क्या लिखना चाहिए?

Question 2

'फोन' के लिए विशेष रूप से @मीडिया क्वेरी है ..

@media (max-width: 480px) { ... }

लेकिन, आप किसी भी छोटे आकार के स्क्रीन के लिए पैडिंग / मार्जिन को हटा सकते हैं। डिफ़ॉल्ट रूप से, बूटस्ट्रैप 978px पर बॉडी, कंटेनर और नेबर्स के मार्जिन / पैडिंग को समायोजित करता है।

यहाँ मेरे लिए कुछ क्वेरीज़ काम की हैं (ज्यादातर मामलों में):

@media (max-width: 978px) {
    .container {
      padding:0;
      margin:0;
    }

    body {
      padding:0;
    }

    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
      margin-left: 0;
      margin-right: 0;
      margin-bottom:0;
    }
}

डेमो

बूटस्ट्रैप 4 के लिए अद्यतन

नए उत्तरदायी रिक्ति वाले बर्तन का उपयोग करें, जो आपको विभिन्न स्क्रीन चौड़ाई (ब्रेकप्वाइंट) के लिए पैडिंग / मार्जिन सेट करने देते हैं: https://stackoverflow.com/a/43208888/171456

Question 3

कंटेनर पंक्तियों को हटाने की तुलना में यहाँ समस्या बहुत अधिक जटिल है क्योंकि ग्रिड पंक्तियाँ इस पैडिंग पर निर्भर करती हैं जब एन्कोडिंग पंक्तियों के लिए ऋणात्मक मार्जिन लागू करते हैं।

इस मामले में कंटेनर गद्दी को हटाने से इस कंटेनर वर्ग के अंदर सभी पंक्तियों के कारण एक एक्स-अक्ष अतिप्रवाह होगा, यह बूटस्ट्रैप ग्रिड के बारे में सबसे बेवकूफ चीजों में से एक है।

तार्किक रूप से इसके द्वारा संपर्क किया जाना चाहिए

.containerपंक्तियों के अलावा किसी अन्य चीज़ के लिए कभी भी कक्षा का उपयोग नहीं करना चाहिए
.containerगैर-ग्रिड html के साथ उपयोग के लिए कोई गद्दी न होने वाले वर्ग का क्लोन बनाएं
.containerमोबाइल पर पेडिंग को हटाने के लिए आप इसे मीडिया के प्रश्नों के साथ मैन्युअल रूप से हटा सकते हैं overflow-x: hidden;जो कि बहुत विश्वसनीय नहीं है लेकिन ज्यादातर मामलों में काम करता है।

यदि आप LESSअंतिम परिणाम का उपयोग कर रहे हैं तो ऐसा दिखेगा

@media (max-width: @screen-md-max) {
    .container{
        padding: 0;
        overflow-x: hidden;
    }
}

जिस भी साइज़ को आप टारगेट करना चाहते हैं, उसके लिए मीडिया क्वेरी को बदलें।

अंतिम विचार, मैं अत्यधिक Foundation Frameworkअपने तरीके से ग्रिड का उपयोग करने की सलाह दूंगा

Question 4

यह धागा मेरे विशेष मामले में समाधान खोजने में सहायक था (बूटस्ट्रैप 3)

@media (max-width: 767px) {
  .container-fluid, .row {
    padding:0px;
  }
  .navbar-header {
    margin:0px;
  }
}

Question 5

इस तरह की समस्याओं को हल करने के लिए मैं CSS का उपयोग कर रहा हूँ - सबसे तेज़ और सरल तरीका जो मुझे लगता है ... बस इसे अपनी आवश्यकताओं के द्वारा संशोधित करें ...

@media only screen and (max-width: 480px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 959px) {
    #your_id {width:000px;height:000px;}
}

Question 6

जिस तरह से मुझे डिवाइस की 100% चौड़ाई पर जाने के लिए एक तत्व मिलता है, उस पर नकारात्मक बाएं और दाएं मार्जिन का उपयोग होता है। शरीर में एक 24px पैडिंग होती है, इसलिए आप इसके लिए नकारात्मक मार्जिन का उपयोग कर सकते हैं:

element{
    margin-left:  -24px;
    margin-right: -24px;
    padding-left:  24px;
    padding-right:  24px;
}

Question 7

बूटस्ट्रैप 4 में, 15px मार्जिन में शुरुआती कंटेनर में सभी पंक्तियों और स्तंभों के नीचे कास्केड है। तो, कुछ इस तरह मेरे लिए काम करता है ...

@media (max-width: 576px) {
    .container-fluid {
        padding-left: 5px;
        padding-right: 5px;
    }

    .row {
        margin-left: -5px;
        margin-right: -5px;
    }
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
        padding-left: 5px;
        padding-right: 5px;
    }
    .row.no-gutters {
        margin-left: 0;
        margin-right: 0;
    }
}

Question 8

मुझे उन साइटों पर यह समस्या हुई है जो समान स्वरूपण और कोड का उपयोग करते हैं और मैंने अपने मस्तिष्क को इस बात पर रैक कर दिया है कि क्या गायब विवरण था जिसने मेरी कुछ साइटों को काम किया, और कुछ को नहीं।

बूटस्ट्रैप 3 के लिए: मेरे लिए इसका उत्तर .container-fluid, .row या रीसेट मार्जिन के लिए css पुनर्लेखन में नहीं था, मुझे जो संगत पैटर्न का एहसास हुआ, वह था लंबे शब्दों की डिज़ाइन को फेंकना और मार्जिन बनाना ।

समाधान कदम:

कंटेनरों को अस्थायी रूप से हटाकर अपने पृष्ठ का परीक्षण करें जिसमें कंटेनर हों और छोटे ब्राउज़रों पर अपनी साइट का परीक्षण करें। यह आपकी समस्या कंटेनर की पहचान करेगा।
आपको एक div स्वरूपण समस्या हो सकती है। यदि आप करते हैं, तो इसे ठीक करें। यदि सब ठीक है तो:
पहचानें यदि आपने लंबे शब्दों का उपयोग किया है जो लपेट नहीं रहे हैं। यदि आप शब्द नहीं बदल सकते हैं (जैसे टैग लाइनों या नारों, आदि के लिए)

समाधान 1: छोटे स्क्रीन के लिए अपनी मीडिया क्वेरी में छोटे आकार में फ़ॉन्ट को प्रारूपित करें (मैं आमतौर पर @मीडिया (अधिकतम-चौड़ाई: 767px) पर्याप्त होने के लिए)।

या:

समाधान 2:

@media (max-width: 767px){

h1, h2, h3 {word-wrap: break-word;}
}

Question 9

पॉलियस मारसुइआकाइटिस के सीएसएस ने मेरी उत्पत्ति विषय के लिए अच्छी तरह से काम किया, यहाँ है कि मैंने अपनी आवश्यकता के लिए इसे कैसे संशोधित किया:

@media only screen and (max-width: 480px) {
.entry {
background-color: #fff;
margin-bottom: 0;
padding: 10px 8px;

}

Question 10

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left:0px;
    padding-right:0px;
}

Question 11

Heres मैं बूटस्ट्रैप 3/4 के लिए क्या करता हूं

कंटेनर के बजाय कंटेनर-तरल पदार्थ का उपयोग करें।

इसे मेरे सीएसएस में जोड़ें

@media (min-width: 1400px) {
    .container-fluid{
        max-width: 1400px;
    }   
}

यह 1400px चौड़ाई स्क्रीन के नीचे मार्जिन को हटा देता है

Question 12

एक और सीएसएस जो मार्जिन की समस्या बना सकता है वह यह है कि direction:someValueआपकी सीएसएस में है, इसलिए इसे प्रारंभिक पर सेट करके हटा दें।

उदाहरण के लिए:

body {
     direction:rtl;
 }
@media (max-width: 480px) {
    body {
     direction:initial;
    }
}

Question 13

इसका आसान उपाय यह है कि कुछ ऐसा लिखें,

पिक्सल-एलजी -1

MB-एलजी -5

Lg जोड़कर, वर्ग केवल बड़े स्क्रीन पर लागू किया जाएगा