Vermeiden Sie große Abstände im Bootstrap?

Ich habe eine Bootstrap-Seite, die automatisch mit einer Datenbanktabelle gefüllt wird. Mein Problem ist, dass mit dem aktuellen Code, den ich verwende, es endet wie folgt aussieht: Current Look Vermeiden Sie große Abstände im Bootstrap?

Gibt es eine Möglichkeit, dass ich automatisch alles so aussehen kann? Proposed Look

Aktuelle Code:

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="block block-transparent"> 
       <div class="content tasks"> 
        <div class="task-item priority-<%=importancecolor%> float"> 
         <div class="task-item-content"> 
          <div class="task-item-head"><%=rs("Summary")%></div> 
          <div class="task-item-subhead"><%=rs("detail")%></div> 
          <div class="task-item-date"><i class="icon-calendar"></i>&nbsp;<%=rs("targetcompletiondate")%>&nbsp;&nbsp;&nbsp;<i class="icon-user"></i>&nbsp;<%=rs("assignedto")%></div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

Quelle

2017-07-25 Michael Davison

allererst müssen Sie diese Bootstrap wissen arbeitet mit Gittern, deshalb gibt es Spalten und Zeilen ist. Wenn Sie implementieren möchten, was Sie wollen, würde ich vorschlagen, Ihre eigenen benutzerdefinierten CSS verwenden. Das div wird entsprechend der Länge des Inhalts erweitert. meine CSS und HTML würde wie unten mögen:

\t <!DOCTYPE html> 
 
\t <html> 
 
\t <head> 
 
\t  <title>Masonry</title> 
 
\t <style> 
 
\t .col-1{background: #2ecc71;width: 30%;float: left;} 
 
\t .col-2{background: #34495e;width: 30%;float: left;} 
 
\t .col-3{background: #2980b9;width: 30%;float: left;} 
 
\t .col-4{background: #c0392b;width: 30%;float: left;} 
 
\t .col-5{background: #7f8c8d;width: 30%;float: left;} 
 
\t </style> 
 
\t </head> 
 
\t <body> 
 

 
\t <div class="wrap"> 
 
\t  <div class="col-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia optio nihil rerum et deserunt tempore quidem, voluptate voluptates mollitia doloremque, excepturi cum dolore veniam dolorem? Error magnam, molestiae non rem!</div> 
 
\t  <div class="col-2"> voluptate voluptates mollitia doloremque, excepturi cum dolore veniam dolorem? Error magnam, molestiae non rem!</div> 
 
\t  <div class="col-3">id itaque corrupti?</div> 
 
\t  <div class="col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam fugiat consequuntur molestias quisquam nemo enim perferendis praesentium magnam, perspiciatis, itaque labore nesciunt accusantium assumenda quas incidunt aut animi veritatis cum.</div> 
 
\t  <div class="col-5"> voluptate voluptates mollitia doloremque, excepturi cum dolore veniam dolorem? Error magnam, molestiae non rem!</div> 
 
\t </div> 
 

 
\t </body> 
 
\t </html>

Quelle

2017-07-25 09:24:10

Können Sie ein Beispiel für die Art von CSS geben, die ich verwenden müsste? –

Sie können diesen Link in [Codepen] überprüfen (https://codepen.io/viduthalai1947/pen/jPoVBQ) –

Diese Antwort funktionierte, aber ich musste meine Struktur neu gestalten –

Wenn ich Sie richtig verstehe, Sie wollen eine Mauerwerk-Stil für das Raster, wie Pinterest tut.

Sie implementieren kann es Flexbox mit (Check https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a) oder, wenn Sie das Bootstrap Gitter zu halten bevorzugen, versuchen Sie JavaScript (https://masonry.desandro.com/), altought empfehle ich, dass Sie JavaScript nicht für etwas verwenden, sollten Sie in CSS tun können (Wenn Sie keine Probleme mit der Browserkompatibilität haben).

Quelle

2017-07-25 09:34:44

Vermeiden Sie große Abstände im Bootstrap?

Antwort

Verwandte Themen