मैं एकाधिक पंक्तियों को जोड़ने के लिए बूटस्ट्रैप कॉलम कैसे प्राप्त कर सकता हूं?

Question

मैं यह पता लगाने की कोशिश कर रहा हूं कि बूटस्ट्रैप के साथ निम्न ग्रिड कैसे करें।

मुझे यकीन नहीं है कि मैं बॉक्स (नंबर 1) कैसे बनाऊंगा जो दो पंक्तियों में फैला है। बक्से क्रमिक रूप से उत्पन्न होते हैं जिस क्रम में उन्हें बिछाया जाता है। बॉक्स 1 एक स्वागत योग्य संदेश है।

इसके साथ जाने के लिए सबसे अच्छे तरीके पर कोई विचार?

Comments

twitter.github.io/bootstrap/scaffolding.html#gridSystem , आप बूटस्ट्रैप ग्रिड सिस्टम को घोंसला बना सकते हैं।

— हिप्पो

तो पहली पंक्ति के भीतर 2 पंक्तियों को घोंसले बनाते हुए, 3 के बजाय 2 पंक्तियाँ बनाएं? यह समस्याग्रस्त हो सकता है जब बक्से प्रोग्रामेटिक रूप से उत्पन्न होते हैं।

— जेम्स जेफरी

अगर यह काम करेगा कोई विचार नहीं है, लेकिन pull-leftसभी बक्से के काम में कक्षा जोड़ देगा? यह बॉक्स 1 को 2 + 4 के समान ऊँचाई नहीं देगा, लेकिन जब आप ऊँचाई सेट करते हैं तो इसे काम करने देना चाहिए।

— हेलवुड

Hailwood, कि अगर आप कर सकते हैं एक जवाब के रूप में, अगर मैं अपना कोड पेस्ट करूँगा नहीं। यह काम किया ... कम से कम क्रोम पर। इसे अन्य ब्राउज़रों में परीक्षण करने की आवश्यकता है।

— जेम्स जेफरी

@ हेलवुड इन्फैक्ट, कोई पुल लेफ्ट की जरूरत नहीं है। बस पहले तत्व काम पर एक ऊंचाई सेट करना।

— जेम्स जेफरी

Answer 1

बूटस्ट्रैप 3 के लिए:

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


<div class="row">
    <div class="col-md-4">
        <div class="well">1
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6">
                <div class="well">2</div>
            </div>
            <div class="col-md-6">
                <div class="well">3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="well">4</div>
            </div>
            <div class="col-md-6">
                <div class="well">5</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="well">6</div>
    </div>
    <div class="col-md-4">
        <div class="well">7</div>
    </div>
    <div class="col-md-4">
        <div class="well">8</div>
    </div>
</div>

बूटस्ट्रैप 2 के लिए:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row-fluid">
    <div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div>
    <div class="span8">
        <div class="row-fluid">
            <div class="span6"><div class="well">2</div></div>
            <div class="span6"><div class="well">3</div></div>
        </div>
        <div class="row-fluid">
            <div class="span6"><div class="well">4</div></div>
            <div class="span6"><div class="well">5</div></div>
        </div>
    </div>
</div>
<div class="row-fluid">
    <div class="span4">
        <div class="well">6</div>
    </div>
    <div class="span4">
        <div class="well">7</div>
    </div>
    <div class="span4">
        <div class="well">8</div>
    </div>
</div>

JSFiddle (बूटस्ट्रैप 2) पर डेमो देखें: http://jsfiddle.net/SxcqH/52/

Comments

जैसे-जैसे बॉक्स बढ़ता है आप बॉक्स चार और पाँच को कैसे भरेंगें?

— इमरान एनजेड

stackoverflow.com/questions/19695784/…

— मास्टरगलन

यह उदाहरण काफी काम नहीं करता है, पहले कॉलम के निचले किनारे को बाकी के साथ थोड़ा गुमराह किया गया है।

— जैककिश

यह एक महान जवाब है, लेकिन क्या होगा अगर बॉक्स 5 को पंक्ति 3 में भी विस्तार करने की आवश्यकता है, और अधिक-तो, गतिशील रूप से?

— मिशाल

@ Misha'el यह बहुत सरल है, बस उसने बॉक्स 1 के लिए क्या किया और इसे बॉक्स 3/5 पर लागू करें। समान आकार के 3 स्तंभ होने चाहिए, बाहर वाले पर सिर्फ 1 पंक्ति होगी, अंदर की दो पंक्तियों में एक।

— नाथन विलियम्स

Answer 2

टिप्पणियों के सुझाव की तरह, समाधान नेस्टेड स्पैन / पंक्तियों का उपयोग करना है।

<div class="container">
    <div class="row">
        <div class="span4">1</div>
        <div class="span8">
            <div class="row">
                <div class="span4">2</div>
                <div class="span4">3</div>
            </div>
            <div class="row">
                <div class="span4">4</div>
                <div class="span4">5</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span4">6</div>
        <div class="span4">7</div>
        <div class="span4">8</div>
    </div>
</div>

Answer 3

नीचे दिया गया उदाहरण काम कर रहा था। बस पहले तत्व पर एक ऊंचाई निर्धारित करना

<ul class="row">
    <li class="span4" style="height: 100px"><h1>1</h1></li>
    <li class="span4"><h1>2</h1></li>
    <li class="span4"><h1>3</h1></li>
    <li class="span4"><h1>4</h1></li>
    <li class="span4"><h1>5</h1></li>
    <li class="span4"><h1>6</h1></li>
    <li class="span4"><h1>7</h1></li>
    <li class="span4"><h1>8</h1></li>
</ul>

मैं मदद नहीं कर सकता, लेकिन यह सोचकर कि यह एक पंक्ति का गलत उपयोग है।

Answer 4

मेरा मानना ​​है कि पंक्तियों को कैसे फैलाया जाए, इसका उत्तर पूरी तरह से दिया गया है (अर्थात पंक्तियों को जोड़कर), लेकिन मैं अपनी नेस्टेड पंक्तियों के मुद्दे पर उनके कंटेनर को नहीं भरता। जबकि फ्लेक्सबॉक्स और नकारात्मक मार्जिन एक विकल्प है, एक बहुत आसान समाधान युक्त बक्से 2, 3, 4 और 5 h-50पर पूर्वनिर्धारित वर्ग का उपयोग करना है row।

नोट: मैं उपयोग कर Bootstrap-4रहा हूं, मैं सिर्फ साझा करना चाहता था क्योंकि मैं एक ही समस्या में भाग गया था और यह एक और अधिक सुरुचिपूर्ण समाधान पाया गया :)

Answer 5

<div class="row">
  <div class="col-4 alert alert-primary">
     1
  </div>
  <div class="col-8">
    <div class="row">
      <div class="col-6 alert alert-primary">
        2
      </div>
      <div class="col-6 alert alert-primary">
        3
      </div>
      <div class="col-6 alert alert-primary">
        4
      </div>
      <div class="col-6 alert alert-primary">
        5
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-4 alert alert-primary">
    6
  </div>
  <div class="col-4 alert alert-primary">
    7
  </div>
  <div class="col-4 alert alert-primary">
    8
  </div>
</div>