बूटस्ट्रैप केंद्र पूरी पंक्ति में सभी कॉलम

Question

मैं वर्तमान में बूटस्ट्रैप के साथ एक वेब पेज बना रहा हूं और मैं कॉलम का उपयोग कर रहा हूं। मेरे पेज की तरह दिखता है:

मैं अंतिम स्तंभ केंद्र के लिए (दूसरी पंक्ति में) चाहते हैं, लेकिन पेज गतिशील है और मैं नहीं जानता कि देखते हैं कि कितने कंटेनरों।

1) मेरी सीएसएस को यह करें::

मैं गूगल पर इस दो समाधान पाया

.col-centered{ 
    float: none; 
    margin: 0 auto; 
} 

2) वर्ग टैग विशेषता को यह जोड़े

col-lg-offset-4 

लेकिन दोनों समाधान इस तरह दिखते हैं:

यह वही नहीं है जो मैं चाहता हूं। मैं इसे इस तरह दिखना चाहते हैं:

मैं यह कैसे प्राप्त कर सकते हैं?

Answer 1

बूटस्ट्रैप के कॉलम सीएसएस float संपत्ति के साथ डिफ़ॉल्ट रूप से चल रहे हैं। float के साथ हम कॉलम को मध्य संरेखित नहीं कर सकते हैं। हालांकि display: inline-block के साथ हम कर सकते हैं। हमें केवल कॉलम की शैलियों से float को निकालना है और उन्हें inline-block पर vertical-align: middle के साथ बदलना है और आप जो चाहते हैं उसे प्राप्त करेंगे। लेकिन inline-block के साथ आने वाली अतिरिक्त जगह को निकालना न भूलें।

यह चाल है।

.wrapper { 
 
    background: green; 
 
    padding: 20px 0; 
 
} 
 

 
.box { 
 
    border-radius: 10px; 
 
    margin-bottom: 30px; 
 
    background: #fff; 
 
    padding: 10px; 
 
    color: #000; 
 
} 
 

 
.center-align { 
 
    letter-spacing: -4px; 
 
    text-align: center; 
 
    font-size: 0; 
 
} 
 

 
.center-align [class*='col-'] { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    letter-spacing: 0; 
 
    font-size: 14px; 
 
    float: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="wrapper"> 
 
    <div class="container center-align"> 
 
    <div class="row"> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container center-align"> 
 
    <div class="row"> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

नोट: स्थापना font-size: 0; अक्षर-दूरी: माता-पिता पर -4 पीएक्स और अभिभावक के फ़ॉन्ट आकार को लागू करना: 14 पीएक्स; अक्षर-दूरी: बाल तत्वों पर 0 वापस सफेद जगह को हटा देगा जो इनलाइन-ब्लॉक के साथ आता है।

Answer 2

आपको टेक्स्ट की अंतिम पंक्ति को एक अलग पंक्ति में जोड़ने और "col-md-4" को "col-md-12" में बदलने की आवश्यकता है।

<div class="row"> 
    <div class="col-md-4"> // column 1 
     bla bla bla 
    </div> 
    <div class="col-md-4"> //column 2 
     bla bla bla 
    </div> 
    <div class="col-md-4"> // column 3 
     bla bla bla 
    </div> 
</div> 
<div class="row"> 
    <center> 
    <div class="col-md-12"> //last column, also note I changed it to 12 
     bla bla bla 
    </div> 
    </center> 
</div> 

Answer 3

बूटस्ट्रैप में अतिरिक्त सीएसएस नियमों के परिचय के बिना आपके द्वारा किए गए लेआउट को प्राप्त करने के लिए अंतर्निहित कार्यक्षमता है। बस .col-md-offset-* कक्षा का उपयोग करें:

.col-md-offset-* कक्षाओं का उपयोग कर कॉलम को दाईं ओर ले जाएं। ये वर्ग * कॉलम द्वारा कॉलम के बाएं हाशिए को बढ़ाते हैं। उदाहरण के लिए, .col-md-offset-4 चार कॉलम पर .col-md-4 चलाता है।

आपके लेआउट को इस के समान लग रही अंत होगा:

.show-grid { 
 
    margin-bottom: 15px; 
 
} 
 

 
.your-custom-div { 
 
    height: 50px; 
 
    background-color: green; 
 
    color: white; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row show-grid"> 
 
     <div class="col-md-4"> 
 
     <div class="your-custom-div"> 
 
      .col-md-4 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <div class="your-custom-div"> 
 
      .col-md-4 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <div class="your-custom-div"> 
 
      .col-md-4 
 
     </div> 
 
     </div> 
 
     <div class="clearfix visible-md"></div> 
 
    </div> 
 
    <div class="row show-grid"> 
 
     <div class="col-md-4 col-md-offset-4"> 
 
     <div class="your-custom-div"> 
 
      .col-md-4 .col-md-offset-4 
 
     </div> 
 
     </div> 
 
     <div class="clearfix visible-md"></div> 
 
    </div> 
 
    </div> 
 
</body> 
 
    
 
</html>

संपादित करें # 1: नहीं जानते हुए भी कि कितने कॉलम आप के लिए अपने डेटाबेस से प्राप्त करने में कठिनाई हो जाएगा की आपकी आवश्यकता के लिए दूसरी पंक्ति, एक और विकल्प एचटीएमएल के आउटपुट के दौरान एक सशर्त उपयोग करना होगा ताकि .col-md-offset-4 वर्ग भी आउटपुट किया जा सके यदि कॉलम की संख्या से विभाजित आपके संग्रह में आइटमों की संख्या का मॉड्यूल 1 बराबर है, या आय अन्यथा सामान्य रूप से एड। रेज़र के साथ एएसपी.नेट में, यह इस तरह कुछ दिखाई देगा (नीचे दिया गया उदाहरण प्रस्तावित तर्क का प्रदर्शन करने के उद्देश्य से सरल रखा गया है, इसे अपने स्वयं के एचटीएमएल हेल्पर क्लास में भी दोबारा संशोधित किया जा सकता है, अन्य स्तंभ आकारों के लिए लेखांकन):

@{ 
    bool lastItemShouldBeCentered = Foo.Count % 3 == 1; 
    for (int i = 0; i < Foo.Count; i++) 
    { 
     bool isLastItem = i == Foo.Count - 1; 
     if (isLastItem && lastItemShouldBeCentered) 
     { 
      <div class="col-md-4 col-md-offset-4"> 
       // Foo[i] content here 
      </div> 
     } 
     else 
     {     
      <div class="col-md-4"> 
       // Foo[i] content here 
      </div> 
     } 
    } 
} 

संपादित करें # 2: ऐसा लगता है कि मैंने आपकी आवश्यकता को गलत तरीके से पढ़ा है। 1 बाएं से अधिक कॉलम के लिए, यह समाधान पर्याप्त होगा। अधिक के लिए, मैं @ मुहम्मद के जवाब के साथ जाऊंगा।