Hai cột Danh sách có dấu đầu dòng trong phản hồi twitter bootstrap

Đây là bước đột phá đầu tiên của tôi vào Twitter Bootstrap. Hãy xem mẫu này ở đây: http://twitter.github.com/bootstrap/examples/hero.html Hai cột Danh sách có dấu đầu dòng trong phản hồi twitter bootstrap

Bên dưới một trong các tiêu đề, tôi muốn phá vỡ một dài ul thành hai cột:

* item1 * item4
* ITEM2 * item5
* item3 * item6

Có thể có hai mã riêng biệt <ul> trong mã, nó chỉ cần trông giống như hai cột có dấu đầu dòng cạnh nhau.

Ai đó có thể đề xuất phương pháp cho tôi không? Vấn đề của tôi cho đến nay là giữ cho nó đáp ứng với kích thước màn hình để thu hẹp màn hình hai danh sách riêng biệt phần nào chồng lên nhau một lần nữa.

Cảm ơn!

Nguồn

2012-06-26 Jonathan S. Fisher

sử dụng 'float: left' trên mỗi' ul' –

Tôi sẽ sử dụng hệ thống lưới điện chất lỏng bên trong thẻ div span4. Kiểm tra hệ thống lưới chất lỏng ở đây ... http://getbootstrap.com/css/#grid

Sử dụng phương pháp này, danh sách sẽ xếp chồng lên nhau khi màn hình nhỏ.

Dưới đây là một ví dụ ...

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

Nguồn

2012-06-26 06:57:11 Theo

exempli gratia: http://jsfiddle.net/Ry4RN/ – jpfreire

@jpfreire - Bạn không sử dụng bootstrap, không có gì lạ khi danh sách của bạn trông rất tuyệt. ;-) – Ace

@Khi anh ấy đang sử dụng bootstrap, không có gì lạ khi danh sách của anh ấy trông rất tuyệt. –

này sẽ giúp trong trường hợp bạn có một ul một li nhiều của

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

Nguồn

2014-04-04 12:17:23

Hai cột Danh sách có dấu đầu dòng trong phản hồi twitter bootstrap

Trả lời

Các vấn đề liên quan