मेरे पास एक फोटो गैलरी के लिए एक मानक लूप है और मैं उपयोग कर रहा हूं चहचहाना-बूटस्ट्रैप col-xs-12 col-sm-6 col-md-4 col-lg-3 जो मुझे डेस्कटॉप पर एक 4 छवि प्रदान करता है, मोबाइल पर एकल फोटो के लिए स्केलिंग करता है।
यह सब अच्छा काम करता है।
एक चीज जो मुझे परेशान कर रही है वह यह है कि मुझे मोबाइल उपकरणों पर देखने के दौरान एकल-पार की तस्वीर चाहिए, जो कि पृष्ठ पर केंद्र के साथ संरेखित हो, लेकिन वे सभी बाईं ओर संरेखित हैं।
तो यहाँ मैं क्या कर रहा हूँ के कुछ बुनियादी छद्म है:
<div class="container">
<div class="row">
<?php
foreach ($photos AS $photo) {
?>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<img src="/images/pathtoimage">
</div>
<?php
}
?>
</div>
</div>
फिर से, वास्तविक लूपिंग भाग, और चारों ओर एक के नीचे एक सभी पूरी तरह से काम करते हैं, मैं सिर्फ मोबाइल देखने के लिए कैसे हो रही है पर अटक रहा हूँ (col-xs-12) पृष्ठ के मध्य में केंद्रित होना, संरेखित न होना।
किसी को पता है कि ऐसा करने के लिए बूटस्ट्रैप जादू क्या है?
उत्तर:
उत्तर № 1 के लिए 1आप कुछ सीएसएस के साथ छवियों को केंद्र में रख सकते हैं। मैंने ए बेला
यदि आप चाहते हैं कि छवियों को केवल कुछ विराम बिंदुओं से जोड़ा जाए तो आप कुछ विराम बिंदुओं पर उन्हें केंद्रित करने के लिए मीडिया प्रश्नों का उपयोग कर सकते हैं।
उदाहरण के लिए, केवल छोटे स्क्रीन पर छवियों को ccenter करने के लिए:
@media(max-width: 768px) {
.gallery-image img {
display: block;
margin: 0 auto;
}
}
जवाब के लिए 0 № 2
उपयोग text-center क्लास टू सेंटर इमेज