Zwei Spalten Bulleted Listen in responsive twitter bootstrap

Dies ist mein erster Ausflug in Twitter Bootstrap. Schauen Sie sich auf diese Vorlage hier: http://twitter.github.com/bootstrap/examples/hero.html Zwei Spalten Bulleted Listen in responsive twitter bootstrap

Unter einer der Überschriften, ich möchte eine lange ul in zwei Spalten brechen:

* item1 * item4
* item2 * item5
* item3 * item6

Es kann zwei separate <ul> s im Code sein, es muss nur wie zwei Aufzählungszeichen nebeneinander aussehen.

Kann mir jemand eine Methode empfehlen? Mein Problem ist bisher, dass es auf die Bildschirmgröße reagiert, so dass die beiden separaten Listen auf schmalen Bildschirmen wieder aufeinander gestapelt werden.

Danke!

Quelle

2012-06-26 Jonathan S. Fisher

Verwenden Sie 'float: links' auf jeder' ul' –

Ich würde ein Fluid-Grid-System innerhalb der Span4 Div-Tag verwenden. Sehen Sie sich das Materialrastersystem hier an ... http://getbootstrap.com/css/#grid

Mit dieser Methode werden die Listen bei kleinem Bildschirm wieder aufeinander gestapelt.

Hier ist ein Beispiel ...

<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>

Quelle

2012-06-26 06:57:11 Theo

Beispiel: http://jsfiddle.net/Ry4RN/ – jpfreire

@jpfreire - Sie verwenden kein Bootstrap, kein Wunder, dass Ihre Listen so gut aussehen. ;-) – Ace

@Ace er benutzt Bootstrap, kein Wunder, dass seine Listen so gut aussehen. –

dies im Falle helfen sollten Sie ein ul eines vielen li haben

css

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

html (haml)

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

Quelle

2014-04-04 12:17:23

Zwei Spalten Bulleted Listen in responsive twitter bootstrap

Antwort

Verwandte Themen