Bootstrap Grid: Cột nổi theo chiều dọc

Tôi đang sử dụng lưới Bootstrap cho một dự án và tôi đã tự hỏi liệu nó có thể làm cho các cột nổi theo chiều dọc hay không. Ngay bây giờ tôi dường như không thể tìm ra một phương pháp làm cho điều này có thể xảy ra. Tôi đang tìm một giải pháp cho vấn đề này dưới hình thức một số css tùy chỉnh cho lưới Boostrap hoặc sử dụng lưới khác. Tuy nhiên tôi muốn rằng lưới điện được thiết lập chỉ sử dụng css, không có JavaScript.Bootstrap Grid: Cột nổi theo chiều dọc

Có một hình ảnh và một liên kết cho ví dụ:

Example

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <title>Test</title> 
    <style type="text/css"> 
    body { 
     margin-top: 20px; 
    } 

    .container { 
     padding: 0 10px; 
    } 

    @media (min-width: 768px) { 
     .container { 
      width: 768px; 
     } 
    } 

    @media (min-width: 992px) { 
     .container { 
      width: 868px; 
     } 
    } 

    .div1, .div2, .div3, .div4, .div5, .div6 { 
     background-color: #999; 
     border-radius: 6px; 
     width: 100%; 
     display: table-cell; 
     text-align: center; 
     vertical-align: middle; 
     font: bold 28px 'Arial'; 
    } 

    .div1 { 
     height: 120px; 
    } 

    .div2 { 
     height: 260px; 
    } 

    .div3 { 
     height: 140px; 
    } 

    .div4 { 
     height: 180px; 
    } 

    .div5 { 
     height: 200px; 
    } 

    .div6 { 
     height: 90px; 
    } 

    .row { 
     background-color: #CCC; 
     border-radius: 6px; 
     padding: 5px; 
     margin: 0; 
    } 

    [class*="col-"] { 
     display: table; 
     padding: 5px; 
    } 
    </style> 
</head> 
<body> 

<div class="container"> 
    <h2><b>Using Bootstrap</b><br>Each DIV is 6 columns wide with a variable height.<br>They're inside the same row.</h2><br> 
    <div class="row"> 
     <div class="col-xs-6"> 
      <div class="div1">DIV 1</div> 
     </div> 
     <div class="col-xs-6"> 
      <div class="div2">DIV 2</div> 
     </div> 
     <div class="col-xs-6"> 
      <div class="div3">DIV 3</div> 
     </div> 
     <div class="col-xs-6"> 
      <div class="div4">DIV 4</div> 
     </div> 
     <div class="col-xs-6"> 
      <div class="div5">DIV 5</div> 
     </div> 
     <div class="col-xs-6"> 
      <div class="div6">DIV 6</div> 
     </div> 
    </div> 
</div> 

</body> 
</html>

Nguồn

2015-07-04 Toby

Đó là một câu hỏi phổ biến. CSS không thể làm điều đó (chưa) ... thậm chí không với 'flexbox'. Cột CSS là một tùy chọn nhưng nó sẽ không có thứ tự bạn chỉ ra. –

Bạn cần một bố cục nề để làm điều này. Sử dụng thư viện xây dựng với mã khởi động của bạn. Bạn có thể làm theo điều này sitepoint post để thực hiện việc này.

Một lần nữa ở đây là masonry template using bootstrap trên github.

Nguồn

2015-07-04 10:20:40 WebDevRon

Vâng, đó cũng là giải pháp duy nhất cho vấn đề của tôi mà tôi tìm thấy. Tôi đã tìm cách giải quyết nó với css tinh khiết, nhưng điều đó có thể không thực hiện được: ( Cảm ơn bạn đã liên kết mẫu, giúp rất nhiều! – Toby

Bạn đang tìm kiếm một cái gì đó như thế này? Sử dụng column -properties.

#wrapper{ 
 
    -webkit-column-count: 3; 
 
    -webkit-column-gap: 10px; 
 
    -webkit-column-fill: auto; 
 
    -moz-column-count: 3; 
 
    -moz-column-gap: 10px; 
 
    -moz-column-fill: auto; 
 
    column-count: 3; 
 
    column-gap: 15px; 
 
    column-fill: auto; 
 
} 
 
.box{ 
 
    width: 150px; 
 
    height: 220px; 
 
    background-color: #eee; 
 
    border-bottom: 1px solid black; 
 
    -webkit-column-break-inside: avoid; 
 
    -moz-column-break-inside: avoid; 
 
    column-break-inside: avoid; 
 
}

<div id="wrapper"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

Nguồn

2015-07-04 10:17:20

Bootstrap Grid: Cột nổi theo chiều dọc

Trả lời

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