बूटस्ट्रैप केंद्र 3 कॉल-MD-3 divs

Question

मैं बहुत की तरह एक आवरण है: <div class="community-images"></div>

और इस आवरण के अंदर मैं 3 कॉल-MD-3 divs है:

<div class="col-md-3"></div> 
<div class="col-md-3"></div> 
<div class="col-md-3"></div> 

मैं क्या कोशिश कर रहा हूँ करने के लिए रैपर के अंदर इन 3 divs केंद्र है, मैं इसे कैसे पूरा करूँगा?

.community-images { 
    padding: 40px 0px 40px 0px; 
} 

.col-md-3 { 
    border: 1px solid #ccc; 
    padding: 10px; 
    margin: 10px; 
    min-height: 300px; 
    box-shadow: 10px 10px 5px #888888; 
} 

Answer 1

अद्यतन: यह सामान्य लेआउट के लिए अच्छा समाधान, ट्विटर बूटस्ट्रैप के लिए नहीं है के रूप में यह बूटस्ट्रैप व्यवहार बाधित। बेहतर लेआउट के लिए जेबेन का जवाब देखें।

आपकी समस्या के लिए एक आधुनिक ब्राउज़र समाधान और उपयुक्त। उचित सामग्री के साथ फ्लेक्सबॉक्स तकनीक। yuyokk तरह का सुझाव दिया

@media (min-width:992px) { 
    .community-images { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: center; 
    -webkit-justify-content: center; 
    -ms-flex-pack: center; 
    justify-content: center; 
    } 
} 

Bootply

Answer 2

कॉल-MD-ऑफसेट वर्गों के होते हैं:

यहाँ सीएसएस है। दुर्भाग्य से आपको कॉल में 12 कॉल होने के लिए कॉल-एमडी-ऑफसेट-डेढ़ वर्ग की आवश्यकता है।

मैं बात कर रहा हूँ के बारे में 1,5 + 3 + 3 + 3 + 1,5 = 12

तो तुम तुम वर्ग के मालिक हैं col ऑफसेट करने के लिए लिख सकते हैं। इस तरह Smth।

@media (min-width: 992px) { 
    .col-md-offset-1-and-half { 
     margin-left: 12.499999995%; // col-md-offset-1 has 8.33333333 
     // so you multiply 8.33333333 * 1.5 = 12.499999995% 
    } 
} 

<div class="col-md-3 col-md-offset-1-and-half"></div> 
<div class="col-md-3"></div> 
<div class="col-md-3"></div> 

Answer 3

बूटस्ट्रैप कॉलम की तरह फ्लोटिंग (इसके अलावा संवेदनशील) तत्वों केंद्रित, मार्जिन के साथ कुछ काम की आवश्यकता है।

या आप तत्वों unfloat और इनलाइन-ब्लॉक का उपयोग कर सकते हैं:

.community-images { 
    text-align: center; 
} 

.col-md-3 { 
    float: none; 
    display: inline-block; 
    text-align: left; //reset the text alignement to left 
} 

हर जगह काम करता है, IE8 भी शामिल है।

Answer 4

बूटस्ट्रैप 4 का उपयोग कर किसी के लिए, इस सुविधा जोड़ा गया है: http://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content

<div class="container"> 
    <div class="row justify-content-md-center"> 
    <div class="col col-lg-2"> 
     1 of 3 
    </div> 
    <div class="col-12 col-md-auto"> 
     Variable width content 
    </div> 
    <div class="col col-lg-2"> 
     3 of 3 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col"> 
     1 of 3 
    </div> 
    <div class="col-12 col-md-auto"> 
     Variable width content 
    </div> 
    <div class="col col-lg-2"> 
     3 of 3 
    </div> 
    </div> 
</div> 

Answer 5

कोड:

<div class="community-images"> 
<div class="col-md-3 community-margin"></div> 
<div class="col-md-3"></div> 
<div class="col-md-3"></div> 
</div> 

सीएसएस:

@media (min-width: 768px) { 
.community-margin{ 
    margin-left: 12.5%; 
} 
} 

.community-images { 
    padding: 40px 0px 40px 0px; 
} 

.col-md-3 { 
    border: 1px solid #ccc; 
    padding: 10px; 
    margin: 10px; 
    min-height: 300px; 
    box-shadow: 10px 10px 5px #888888; 
} 

कोड ऊपर की कोशिश करो। आप निश्चित रूप से एक समाधान मिलता है। आप नीचे दिए गए लिंक को भी देख सकते हैं: https://wordpress.com/post/wpkuldip.wordpress.com/61