ट्विटर बूटस्ट्रैप छोटे उपकरणों पर तत्व छिपाता है

Question

मेरे पास यह कोड है:

<footer class="row">
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 1</li>
      <li>Text 2</li>
      <li>Text 3</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 4</li>
      <li>Text 5</li>
      <li>Text 6</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 7</li>
      <li>Text 8</li>
      <li>Text 9</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 10</li>
      <li>Text 11</li>
      <li>Text 12</li>
    </ul>
  </nav>
</footer>

अंदर कुछ ग्रंथों के साथ चार ब्लॉक। वे चौड़ाई में समान हैं, मैंने col-sm-3उन सभी को सेट किया है और जो मैं करना चाहता हूं वह navअतिरिक्त छोटे उपकरणों पर अंतिम छिपाने के लिए है। मैंने hidden-xsउस पर उपयोग करने की कोशिश की है navऔर वह इसे छुपाता है, लेकिन एक ही समय में मैं चाहता हूं कि अन्य ब्लॉकों का विस्तार हो (वर्ग को बदलने के col-sm-3लिए col-sm-4) col-sm-4 X 3 = 12।

कोई भी समाधान?

Answer 1

छोटे उपकरण पर: 4 columns x 3 (= 12) ==> col-sm-3

अतिरिक्त छोटे पर: 3 columns x 4 (= 12) ==> col-xs-4

 <footer class="row">
        <nav class="col-xs-4 col-sm-3">
            <ul class="list-unstyled">
            <li>Text 1</li>
            <li>Text 2</li>
            <li>Text 3</li>
            </ul>
        </nav>
        <nav class="col-xs-4 col-sm-3">
            <ul class="list-unstyled">
            <li>Text 4</li>
            <li>Text 5</li>
            <li>Text 6</li>
            </ul>
        </nav>
        <nav class="col-xs-4 col-sm-3">
            <ul class="list-unstyled">
            <li>Text 7</li>
            <li>Text 8</li>
            <li>Text 9</li>
            </ul>
        </nav>
        <nav class="hidden-xs col-sm-3">
            <ul class="list-unstyled">
            <li>Text 10</li>
            <li>Text 11</li>
            <li>Text 12</li>
            </ul>
        </nav>
    </footer>

जैसा कि आप कहते हैं, हिडन-एक्स पर्याप्त नहीं है, आपको एक्स और एसएम क्लास को जोड़ना होगा।

---

यहाँ उपलब्ध उत्तरदायी कक्षाओं और ग्रिड प्रणाली के बारे में आधिकारिक डॉक्टर से लिंक है ।

सिर में है:

• 1 पंक्ति = 12 बछड़े
• के लिए एक्स tra एस मॉल डिवाइस : col-XS -__
  
• के लिए एसएम सभी डिवाइस : col-एसएम -__
  
• के लिए एम ई डी ium डिवाइस : col-md -__
  
• के लिए एल ए आर जी ई डिवाइस : col-एलजी -__
  
• केवल दृश्यमान करें (अन्य पर छिपा हुआ): दृश्यमान-md (केवल माध्यम में दिखाई दे [lg xs या sm में नहीं)]
• बनाओ केवल छिपा (दूसरे पर दृश्यमान): छिपा-XS (बस XtraSmall में छिपा हुआ)

Comments

ऐसा प्रतीत होता है कि बूटस्ट्रैप 4 में आपको छिपे-आकार (ऊपर | नीचे) के माध्यम से बुदबुदाहट निर्दिष्ट करने की आवश्यकता है। Ex: hidden-sm-down

— इवान सिरोकी

बूटस्ट्रैप 2 के लिए, hidden-phone

— केटी

Answer 2

बूटस्ट्रैप ४

प्रदर्शन (छिपा / दृश्य) वर्गों पर छिपाने के लिए बूटस्ट्रैप 4 में बदल रहे हैं xsव्यूपोर्ट उपयोग करें:

d-none d-sm-block

इसे भी देखें: गायब दिखाई दे रहा है - ** और छिपा हुआ - ** बूटस्ट्रैप v4 में

---

बूटस्ट्रैप 3 (मूल उत्तर)

hidden-xsउपयोगिता वर्ग का उपयोग करें ।।

<nav class="col-sm-3 hidden-xs">
        <ul class="list-unstyled">
        <li>Text 10</li>
        <li>Text 11</li>
        <li>Text 12</li>
        </ul>
</nav>

http://bootply.com/90722

Comments

मैंने उस वर्ग का उपयोग किया है, लेकिन यह सहायक नहीं था, लेकिन आपके उदाहरण में आपने कुछ अन्य वर्गों को दूसरे नौसेना में शामिल किया, जिन्होंने उनके प्रदर्शन को 25% से 33% चौड़ा कर दिया। वह यह था! Thx

— Crisan Raluca Teodora

आपका स्वागत है, लेकिन मुझे याद आया कि आपने पहले ही अपने उदाहरण में 'हिडन-एक्स' का उपयोग कर उल्लेख किया था। +1 @ Jahnux73 उत्तर के लिए

— Zim

Answer 3

बूटस्ट्रैप 4.0 के लिए एक परिवर्तन है

डॉक्स देखें: https://getbootstrap.com/docs/4.0/utilities/display/

मोबाइल पर सामग्री को छिपाने और बड़े उपकरणों पर प्रदर्शित करने के लिए आपको निम्न वर्गों का उपयोग करना होगा:

d-none d-sm-block

प्रथम श्रेणी के सेट सभी उपकरणों में से कोई भी प्रदर्शित नहीं करते हैं और दूसरा इसे उपकरणों के लिए "sm" अप (आप अलग-अलग उपकरणों पर दिखाना चाहते हैं, तो sm के बजाय md, lg इत्यादि का उपयोग कर सकते हैं)।

मैं प्रवास से पहले उस बारे में पढ़ने का सुझाव देता हूं:

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

Answer 4

<div class="small hidden-xs">
    Some Content Here
</div>

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

यह उत्तर ओपी शीर्षक में प्रश्न को संतुष्ट करता है (जो मैंने इस प्रश्नोत्तर को पाया है)।

Comments

यह ठीक काम किया। मैंने एक छवि को छिपाने के लिए इसका उपयोग किया। <div class = "small hidden-xs"> <a href=''link"> </a> </ div>

— अरिंदम रॉयचौधरी