Siatka Bootstrap: pływające kolumny w pionie

Używam siatki Bootstrap dla projektu i zastanawiałem się, czy byłoby możliwe, aby kolumny ułożyły się pionowo. W tej chwili nie mogę znaleźć metody, która to umożliwia. Szukam rozwiązania tego problemu w postaci niektórych niestandardowych css dla siatki Boostrap lub przy użyciu innej siatki. Jednak wolałbym, aby siatka była ustawiona tylko za pomocą css, bez JavaScript.Siatka Bootstrap: pływające kolumny w pionie

Jest to obraz i link do przykładu:

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>

Źródło

2015-07-04 Toby

To częste pytanie. CSS nie może tego zrobić (jeszcze) ... nawet w przypadku 'flexbox'. Kolumny CSS to opcja, ale nie ma ona określonej kolejności. –

Potrzebny jest układ murów, aby to zrobić. Użyj biblioteki murarskiej z kodem bootstrap. Możesz to zrobić, aby wykonać to zadanie: sitepoint post.

Ponownie tutaj jest masonry template using bootstrap na github.

Źródło

2015-07-04 10:20:40 WebDevRon

Tak, to także jedyne rozwiązanie mojego problemu, który znalazłem. Szukałem rozwiązania z czystym css, ale to może nie być możliwe :( Dzięki za link do szablonu, pomaga dużo! – Toby

Szukasz czegoś takiego? Korzystanie z właściwości column.

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

Źródło

2015-07-04 10:17:20

Siatka Bootstrap: pływające kolumny w pionie

Odpowiedz

Powiązane problemy