बूटस्ट्रैप संयोजन पंक्तियों (rowspan)

Question

मैं ट्विटर बूटस्ट्रैप का परीक्षण कर रहा हूं और पंक्तियों के साथ बुनियादी मचान के साथ फंस गया हूं । मैंने कई बार उनकी दस्तावेज़ीकरण संख्या पर दोबारा गौर किया और मैं उन स्तंभों को देख सकता हूं जहां आप मूल रूप से स्तंभ के भीतर स्तंभित कर सकते हैं, लेकिन मैं पंक्तियों को एक में संयोजित करने की क्षमता का पता नहीं लगा सकता और इसे असंबद्ध पंक्तियों के बगल में स्तंभ के साथ संरेखित किया है।

नीचे दी गई तस्वीर में स्पष्ट होना चाहिए कि मैं क्या हासिल करना चाहता हूं।

एकमात्र समाधान समाधान जो मुझे आया था वह तालिकाओं का उपयोग कर रहा है लेकिन मुझे यह विचार पसंद नहीं है क्योंकि मेरा विचार यह है कि तालिकाओं के उपयोग के साथ जवाबदेही काम नहीं करेगी।

क्या किसी के पास इसका कोई सुंदर हल है? मेरे द्वारा किए जाने वाले अधिकांश वेब लेआउट में लचीलेपन के ठीक स्तर की आवश्यकता होगी, इसलिए यह बहुत अच्छा होगा यदि मैं यहां कुछ उपयोगी उठा सकता हूं।

Answer 1

डिफॉल्ट रूप से खड़ी खड़ी होती है, इसलिए किसी कॉलम के भीतर "पंक्तियों" की विशेष हैंडलिंग की आवश्यकता नहीं होती है।

div {
  height:50px;
}
.short-div {
  height:25px;
}

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

<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
      <div class="short-div" style="background-color:green">Span 2</div>
      <div class="short-div" style="background-color:purple">Span 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="short-div" style="background-color:#999">Span 6</div>
      <div class="short-div">Span 6</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
  </div>
</div>

यहाँ की बेला है ।

Comments

बहुत बहुत धन्यवाद। यही तो मैं ढूंढ रहा था! मैं चाहता हूँ कि बूटस्ट्रैप दस्तावेज़ीकरण ने नेस्टिंग कॉलम के तहत इसका उल्लेख किया है क्योंकि दृष्टिकोण मूल रूप से समान है।

— सेओंग ली

अपने उदाहरण में आप को परिभाषित 1row=25px, 2row=50px। क्या आप स्पंदित div को पूरी पंक्ति के रूप में उच्च बना सकते हैं? जोड़ने की कोशिश की, .row{height:100%;}लेकिन यह नहीं गया।

— तोमर डब्ल्यू

हां, @carter मूल उदाहरण बूटस्ट्रैप 3 के अनुरूप नहीं था; मैंने इसे सुधारा है।

— पॉल कीस्टर

उदाहरण में दूसरी पंक्ति पर गटर हैं जो विषम दिखता है।

— कोनी डेकिंको सेप

Answer 2

आपको बूटस्ट्रैप कॉलम नेस्टिंग का उपयोग करना चाहिए।

बूटस्ट्रैप 3 या बूटस्ट्रैप 4 देखें :

<div class="row">
    <div class="col-md-5">Span 5</div>
    <div class="col-md-3">Span 3<br />second line</div>
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
    </div>
    <div class="col-md-2">Span 2</div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">Span 6</div>
            <div class="col-md-12">Span 6</div>
        </div>
    </div>
    <div class="col-md-6">Span 6</div>
</div>

http://jsfiddle.net/DRanJ/125/

(फिडेल स्क्रीन में, परिणाम देखने के लिए अपनी परीक्षण स्क्रीन को बड़ा करें, क्योंकि मैं col- md - * का उपयोग कर रहा हूं , फिर उत्तरदायी स्टैक कॉलम)

नोट : मुझे यकीन नहीं है कि BS2 कॉलम नेस्टिंग की अनुमति देता है , लेकिन पॉल कीस्टर के उत्तर में, कॉलम नेस्टिंग का उपयोग नहीं किया जाता है। आपको इसका उपयोग करना चाहिए और बूटस्ट्रैप को अच्छी तरह से करते हुए सीएसएस को फिर से तैयार करने से बचना चाहिए।

कॉलम की ऊंचाई ऑटो है, यदि आप दूसरी पंक्ति जोड़ते हैं (जैसे मैं अपने उदाहरण में करता हूं), तो कॉलम की ऊंचाई खुद को अनुकूलित करती है।

Comments

यह स्वीकृत उत्तर होना चाहिए क्योंकि यह बूटस्ट्रैप बॉक्स के बाहर काम करता है और इसे किसी सीएसएस

— ट्वीकिंग की

स्वीकृत उत्तर अधिक पठनीय है; इसमें एक कोड स्निपेट और JSfiddle के लिए एक लिंक है और IMHO पॉल कीस्टर के उदाहरण अल्कालिन के उदाहरणों की तुलना में अधिक स्पष्ट हैं। इसलिए मुझे लगता है कि पॉल कीस्टर को स्वीकार किए गए उत्तर के रूप में रखा जाना चाहिए, कम से कम जब तक अल्कलिन के उत्तर में सुधार नहीं हो जाता।

— naXa

@ मेरे ब्राउज़र में क्रोम (क्रोम) आपके उत्तर से लिंक की गई फ़ेल्ड अपेक्षित परिणाम नहीं देता है (प्रश्न में चित्र देखें)। वास्तविक परिणाम सभी divs एक कॉलम में संरेखित है।

— naXa

यदि आप सभी संरेखित स्पैन के साथ एक एकल कॉलम देखते हैं, तो यह -md-उत्तरदायी नियम है। अपेक्षित परिणाम देखने के लिए आपको अपनी स्क्रीन को बड़ा करना होगा। आप छोटी स्क्रीन पर स्तंभों के रूप में प्रदर्शित करने के लिए अपने फैला जरूरत है, की जगह -md-से -sm-या -xs-। यह एक विराम बिंदु है (देखें bootstrapdocs.com/v3.0.3/docs/css/#grid )।

— एलकिन

Answer 3

नोट: यह बूटस्ट्रैप 2 के लिए था (प्रासंगिक जब सवाल पूछा गया था)।

आप row-fluidकिसी मौजूदा के अंदर एक द्रव (प्रतिशत) आधारित पंक्ति बनाने के लिए इसका उपयोग करके इसे पूरा कर सकते हैं block।

<div class="row">
   <div class="span5">span5</div>
   <div class="span3">span3</div>
   <div class="span2">
      <div class="row-fluid">
         <div class="span12">span2</div>
         <div class="span12">span2</div>
      </div>
   </div>
   <div class="span2">span2</div>
</div>
<div class="row">
   <div class="span6">
      <div class="row-fluid">
         <div class="span12">span6</div>
         <div class="span12">span6</div>
      </div>
   </div>
   <div class="span6">span6</div>
</div>

यहाँ एक JSFiddle उदाहरण है ।

मैंने नोटिस किया कि row-fluidपहले के बाद वाले स्पैन के लिए एक अजीब लेफ्ट मार्जिन था जो दिखाई देता है (या दिखाई नहीं देता है) । यह एक छोटे सीएसएस ट्वीक के साथ तय किया जा सकता है (यह वही सीएसएस है जो पहले बच्चे पर लागू होता है, पहले बच्चे के लिए विस्तारित होता है):

.row-fluid [class*="span"] {
    margin-left: 0;
}

Comments

आपके प्रयास के लिए धन्यवाद, लेकिन ऐसा लगता है कि मेरे चुने हुए उत्तर द्वारा सुझाए अनुसार इसे पूरा करने के लिए पंक्ति-द्रव का उपयोग नहीं करना है। मैं वास्तव में इसकी सराहना करता हूं!

— सेओंग ली

बहुत सच है, लेकिन यह न भूलें कि row-fluidजब आंतरिक पंक्तियों को उप-विभाजित करने का समय आता है।

— पिकप

Answer 4

इसे जाँचें। आशा है कि यह आपके लिए पूर्ण मदद करेगा।

http://jsfiddle.net/j6amM/

.row-fix { margin-bottom:20px;}

.row-fix > [class*="span"]{ height:100px; background:#f1f1f1;}

.row-fix .two-col{ background:none;}

.two-col > [class*="col"]{ height:40px; background:#ccc;}

.two-col > .col1{margin-bottom:20px;}

Answer 5

पॉल का जवाब बूटस्ट्रैप के उद्देश्य को हराने के लिए लगता है; व्यूपोर्ट / स्क्रीन आकार के लिए उत्तरदायी होने के कारण।

जवाबदेही को बनाए रखते हुए पंक्तियों और स्तंभों को जोड़कर आप एक ही परिणाम प्राप्त कर सकते हैं।

यहाँ इस समस्या पर अद्यतित प्रतिक्रिया है;

<div class="container-fluid">
  <h1>  Responsive Nested Bootstrap </h1> 
  <div class="row">
    <div class="col-md-5" style="background-color:red;">Span 5</div>
    <div class="col-md-3" style="background-color:blue;">Span 3</div>
    <div class="col-md-2">
      <div class="row">
        <div class="container" style="background-color:green;">Span 2</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:purple;">Span 2</div>
      </div>
    </div>
    <div class="col-md-2" style="background-color:yellow;">Span 2</div>
  </div>
  
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="container" style="background-color:yellow;">Span 6</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:green;">Span 6</div>
      </div>
    </div>
    <div class="col-md-6" style="background-color:red;">Span 6</div>
  </div>
</div>

आप यहां कोडपेन देख सकते हैं।

Answer 6

div {
  height:50px;
}
.short-div {
  height:25px;
}

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

<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
      <div class="short-div" style="background-color:green">Span 2</div>
      <div class="short-div" style="background-color:purple">Span 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="short-div" style="background-color:#999">Span 6</div>
      <div class="short-div">Span 6</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
  </div>
</div>

Comments

यह मेरे लिए <div class = "col-sm-2"> <div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4" style = "background-" के साथ काम नहीं कर रहा है रंग: पीला; "> <इनपुट प्रकार =" फ़ाइल "आईडी =" imgInp "नाम =" img "स्वीकार ="। png, .jpg, .jpeg "> <! - <इनपुट प्रकार =" पाठ "src =" "class =" form-control "id =" imgName "size =" 40 "> </ input> -> <img id =" img-upload "src =" "alt =" ट्रांसपोर्टर "चौड़ाई =" 300% " ऊँचाई = "50%" वर्ग = "गोल-गोल" /> </ div> </ div> </ div>

— SUDIP SINGH

कृपया अपने कोड के आसपास स्पष्टीकरण जोड़ें। ताकि ओपी और भविष्य के पाठक आपके उत्तर को आसानी से समझ सकें।

— संगम बेलोज