2013-08-26 14 views
5

मैं बूटस्ट्रैप का उपयोग अपने वेब यूआई डिजाइन करने के लिए, और अब मैं नीचे के रूप में एक आवश्यकता है:बूटस्ट्रैप का उपयोग कैसे करें div में से एक को छिपाने के लिए जब जूम ब्राउज़र विंडो छोटे आकार

मैं उनके div आईडी के रूप में div संरचना नीचे निर्धारित की गई कर रहे हैं: part1 और part2

<div class="container"> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
       <div id="part1" class="col-md-6"> 
        <div> 
         xxxx 
        </div> 
       </div> 
       <div id="part2" class="col-md-6"> 
        <div> 
         yyy 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

अब मैं जब छोटा ब्राउज़र विंडो आकार या मेरे फोन ब्राउज़र, मैं कैसे इस प्रभाव को प्राप्त कर सकते हैं स्वचालित रूप से part1 छुपाना चाहते हैं?

Btw: मैं part1 के रूप में सीएसएस "कोलैप्स" जोड़ने का प्रयास करते हैं, लेकिन इसे छिपाने पर भी सीधे अपने ब्राउज़र बड़ा है।

उत्तर

3

यह है एक काम कोड, मैं परीक्षण किया है के आधार पर .. बूटस्ट्रैप के लिए

<div class="row"> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4 ">.col-md-4</div> 
    <div class="col-md-4 visible-lg">.col-md-4</div> 
    </div> 
+0

हां, यह काम करता है, लेकिन यह व्यवहार अजीब या अप्रत्याशित है, क्योंकि यदि मैं एमडी आकार पर ब्राउज़र का आकार बदलता हूं, तो यह काम करता है, लेकिन जब मैं ब्राउज़र आकार का आकार बदलना जारी रखता हूं, लेकिन यह छुपाया नहीं जा सकता है। क्या आप न्यूनतम आकार या अधिकतम आकार से संबंधित सुविधाओं के बारे में कुछ जानते हैं? मैं वेब डिज़ाइन और बूटस्ट्रैप पर एक नया आदमी हूं, अग्रिम धन्यवाद। –

+0

यदि आपको मिनी-चौड़ाई और अधिकतम-चौड़ाई का उपयोग करके समाधान की आवश्यकता है, तो आपको मीडिया प्रश्नों का उपयोग करने की आवश्यकता है –

+0

क्या आप मुझे बूटस्ट्रैप के आधार पर एक संक्षिप्त डेमो कोड दे सकते हैं? फिर से धन्यवाद । –

0

बूटस्ट्रैप छिपा फोन छिपा-टैबलेट में उपयोग दृश्यता वर्गों में अपनी आवश्यकताओं

<div class="container"> 
    <div class="panel panel-default"> 
     <div class="panel-body"> 
      <div id="part1" class="col-md-6 hidden-phone"> 
       <div> 
        xxxx 
       </div> 
      </div> 
      <div id="part2" class="col-md-6"> 
       <div> 
        yyy 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
+0

अपने समाधान के लिए धन्यवाद, लेकिन यह अभी भी छिपा हुआ नहीं किया जा सकता है जब मैं आकार बदलने अपने ब्राउज़र छोटे हो जाते हैं। –

+0

बूटस्ट्रैप का कौन सा संस्करण आप उपयोग कर रहे हैं? क्या आपने बूटस्ट्रैप-उत्तरदायी.css –

+0

हाय, प्रसन्ना, मैं बूटस्ट्रैप 3.0 –

16

सही जवाब 3

मीडिया क्वेरी के माध्यम से decice द्वारा सामग्री को दिखाने और छिपाने के लिए उपयोगिता कक्षाओं का उपयोग करें। सीमित आधार पर thses का उपयोग करने की कोशिश करें और smae साइट के पूरी तरह से differnet संस्करणों से बचने के लिए प्रयास करें। इसके बजाय, प्रत्येक डिवाइस की प्रस्तुति के पूरक के लिए उनका उपयोग करें।

Screenshot of Bootstrap responsive utility classes

स्रोत: http://getbootstrap.com/css/#responsive-utilities

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