उत्तरदायी ट्विटर बूटस्ट्रैप में दो कॉलम बुलेट सूचियां

यह ट्विटर बूटस्ट्रैप में मेरा पहला प्रयास है। इस टेम्पलेट यहाँ पर एक नज़र डालें: http://twitter.github.com/bootstrap/examples/hero.html उत्तरदायी ट्विटर बूटस्ट्रैप में दो कॉलम बुलेट सूचियां

शीर्षकों में से एक के नीचे, मैं दो स्तंभों में एक लंबे ul तोड़ने के लिए करना चाहते हैं:

* ITEM1 * item4
* ITEM2 * item5
* item3 * item6

यह कोड में दो अलग <ul> एस हो सकता है, इसे केवल एक दूसरे के बगल में दो बुलेट कॉलम की तरह दिखने की आवश्यकता है।

क्या कोई मुझे एक विधि सुझा सकता है? मेरी समस्या अब तक स्क्रीन आकार के प्रति उत्तरदायी रख रही है ताकि नालियों पर स्क्रीन दो अलग-अलग सूचियों को एक दूसरे पर फिर से ढेर कर दे।

धन्यवाद!

स्रोत

2012-06-26 Jonathan S. Fisher

प्रत्येक 'ul' –

मैं span4 div टैग के अंदर द्रव ग्रिड सिस्टम का उपयोग करूंगा। यहां तरल पदार्थ ग्रिड सिस्टम देखें ... http://getbootstrap.com/css/#grid

इस विधि का उपयोग करते हुए, स्क्रीन छोटी होने पर सूचियों को एक-दूसरे पर फिर से ढेर कर दिया जाएगा।

यहाँ एक उदाहरण है ...

<html> 
<head> 
    <title></title> 
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" /> 
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> 
    <script src="js/bootstrap.min.js" type="text/javascript"></script> 
</head> 
<body> 
     <div class="container"> 
      <div class="row"> 
       <div class="span4"> 
        <h4>Column 1</h4> 
        <div class="container-fluid"> 
         <div class="row-fluid"> 
          <div class="span6"> 
           <ul> 
            <li>Item 1</li> 
            <li>Item 2</li> 
            <li>Item 3</li> 
           </ul> 
          </div> 
          <div class="span6"> 
           <ul> 
            <li>Item 4</li> 
            <li>Item 5</li> 
            <li>Item 6</li> 
           </ul> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="span4"> 
        <h4>Column 2</h4> 
       </div> 
       <div class="span4"> 
        <h4>Column 3</h4> 
       </div> 
      </div> 
     </div> 
</body> 
</html>

स्रोत

2012-06-26 06:57:11 Theo

पर' फ्लोट: बाएं 'का उपयोग करें: http://jsfiddle.net/Ry4RN/ – jpfreire

@jpfreire - आप बूटस्ट्रैप का उपयोग नहीं कर रहे हैं, कोई आश्चर्य नहीं कि आपकी सूचियां बहुत अच्छी लगती हैं। ;-) – Ace

@Ace वह बूटस्ट्रैप का उपयोग कर रहा है, कोई आश्चर्य नहीं कि उसकी सूचियां बहुत अच्छी लगती हैं। –

इस मामले में मदद करनी चाहिए आप एक कई li के

सीएसएस उल एक

@media (min-width:768px) { 
    .col2{ width:100%;} 
    .col2 li{width:49%; float:left;} 
    }

एचटीएमएल (haml)

है

.box-body  
    .row-fluid 
     %ul.col2.clearfix 
     [email protected] do |category| 
     %li 
     =category.title

स्रोत

2014-04-04 12:17:23

उत्तरदायी ट्विटर बूटस्ट्रैप में दो कॉलम बुलेट सूचियां

उत्तर

संबंधित मुद्दे