बूटस्ट्रैप मोबाइल संस्करण

Question

में ग्रिड से एक कॉलम को कैसे छिपाना है, मुझे लगता है कि यह थोड़ा मुश्किल है कि मैं बूटस्ट्रैप मोबाइल संस्करण में ग्रिड से एक कॉलम छिपाना चाहता हूं। आइए उदाहरण

<div class="row"> 
    <div class="col-xs-9"> 
    <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p> 
    </div> 
    <div class="col-xs-3 center-image hidden-xs"><img src="myimage.png"/></div> 
</div> 

कोडिंग के ऊपर, मैं मोबाइल डिवाइस द्वारा देखे जाने पर छवि भाग छुपाता हूं। मैं जो चाहता हूं वह यह नहीं है कि मैं छवि भाग की दूरी को भी नहीं चाहता हूं, यहां तक ​​कि यह बायीं तरफ बढ़ने के रूप में छुपा हुआ है ताकि दाएं तरफ तक पहुंच सके।

Answer 1

के बाद से, आप "XS" में दूसरे स्तंभ छुपा रहे हैं देखने के लिए, आप कर सकते हैं कॉलम 1 में "col-xs-12" वर्ग को परिभाषित करके पहले कॉलम के लिए पूर्ण चौड़ाई का उपयोग करें।

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-xs-12 col-sm-9"> 
 
    <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p> 
 
    </div> 
 
    <div class="col-sm-3 center-image hidden-xs"><img src="myimage.png"/></div> 
 
</div>

Answer 2

आपको मीडिया प्रश्नों का उपयोग करना है।

यहाँ एक उदाहरण है:

@media (min-width: 1000px) { 
 
#newDiv { 
 
    background-color: blue; 
 
    } 
 
.col-xs-3 { 
 
    display: block; 
 
    } 
 
} 
 

 
@media (max-width: 999px) { 
 
    #newDiv { 
 
    
 
    background-color: red; 
 
    width: 100%; 
 
    padding-right: 50px; 
 
    margin-right: 0px; 
 
    } 
 
.col-xs-3 { 
 
    display: none; 
 
    } 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="newDiv" class="col-xs-9"><p>Hello World!</p></div> 
 
<div class="col-xs-3"><p>Hello to you to</p></div>

इस पूर्ण स्क्रीन बनाने स्क्रीन प्रतिक्रिया