Bootstrap 5，列未对齐

Question

I'm using Bootstrap 5 with multiple rows and columns. I would want my columns to be aligned with each rows. This is working but some borders are not aligned with the columns

 .VI-border { border-top: 1px solid grey; border-left: 1px solid grey; border-right: 1px solid grey; }.VI-border-top { border-top: 1px solid grey; }.VI-border-bottom { border-bottom: 1px solid grey; }.VI-border-left { border-left: 1px solid grey; }.VI-border-right { border-right: 1px solid grey; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css"> <div class="row VI-border text-center"> <div class="col-sm-1 VI-border-right VI-border-bottom" style="word-break: break-word;"> VI 10 </div> <div class="col-sm-2 VI-border-right VI-border-bottom">Ammaloramento</div> <div class="col-sm-1 VI-border-right VI-border-bottom">Gravità</div> <div class="col-sm-2 VI-border-right VI-border-bottom">Estensione</div> <div class="col-sm-3 VI-border-right VI-border-bottom">Dettaglio</div> <div class="col-sm-2 offset-sm-1 VI-border-left VI-border-bottom">Segnalazioni</div> </div> <div class="row text-center"> <div class="offset-sm-1 col-sm-2 VI-border-right VI-border-bottom VI-border-left"> Ossidazione </div> <div class="col-sm-1 VI-border-right VI-border-bottom"> Lieve </div> <div class="col-sm-2 VI-border-right VI-border-bottom"> 75 % </div> <div class="col-sm-3 VI-border-right VI-border-bottom"> In corrispondenza delle giunzioni, Forte in corrispondenza della giunzione n. 3 da imbocco Sud </div> <div class="offset-sm-1 col-sm-2 VI-border-right VI-border-bottom VI-border-left" style="height: 22px;"> Presenti: 0 </div> </div>

You can see from the snippet (open full page or expand the snippet) how the borders of the second row are not aligned with borders of first row. The problem could be the borders themselves but I don't know how to resolve it while keeping the border.

Any advice?

Answer 1

Use bootstrap 5 tables

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css"> <table class="table table-bordered"> <thead> <tr> <th scope="col">Ammaloramento</th> <th scope="col">Gravità</th> <th scope="col">Estensione</th> <th scope="col">Dettaglio</th> <th scope="col">Segnalazioni</th> </tr> </thead> <tbody> <tr> <td>Ossidazione</td> <td>Lieve</td> <td>75 %</td> <td> In corrispondenza delle giunzioni, Forte in corrispondenza della giunzione n. 3 da imbocco Sud</td> <td> Presenti: 0</td> </tr> </tbody> </table>

Answer 2

If a table works for you that's great. Bootstrap styles them really well, However if you would like to avoid using a table then the layout you trying to achieve is totally possible. So rather than telling you: don't do that , I will show you: how you can do that :

The Problem(s):

Your borders misalign because ie where one .row 's .col-* has a left border, the adjacent .row instead uses a right border on the previous .col-* , etc. (causing 1px offsets).

	<- left border here will not align
with right border here ->

The Fix:

You just need to be consistent and apply the same borders as the corresponding .col-* in each .row . You can also easily style the borders with CSS variables and then use the border utility classes to apply the borders. In my example below, I also used .text-break on your first .col-* to replace the inline style, and I added .text-truncate to several .col-* s to prevent the text from overflowing the borders.

 .VI-border { --bs-border-width: 1px; --bs-border-style: solid; --bs-border-color: grey; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css"> <div class="container-fluid"> <,-- rows should always be in a container. --> <div class="row VI-border border-top text-center"> <div class="col-sm-1 border-start border-bottom text-break">VI 10</div> <div class="col-sm-2 border-start border-bottom text-truncate">Ammaloramento</div> <div class="col-sm-1 border-start border-bottom text-truncate">Gravità</div> <div class="col-sm-2 border-start border-bottom text-truncate">Estensione</div> <div class="col-sm-3 border-start border-bottom border-end text-truncate">Dettaglio</div> <div class="col-sm-2 offset-sm-1 border-start border-bottom border-end text-truncate">Segnalazioni</div> </div> <div class="row VI-border text-center"> <div class="offset-sm-1 col-sm-2 border-start border-bottom text-truncate">Ossidazione</div> <div class="col-sm-1 border-start border-bottom text-truncate">Lieve</div> <div class="col-sm-2 border-start border-bottom">75 %</div> <div class="col-sm-3 border-start border-bottom border-end">In corrispondenza delle giunzioni: Forte in corrispondenza della giunzione n; 3 da imbocco Sud</div> <div class="col-sm-2 offset-sm-1 border-start border-bottom border-end" style="height: 22px ">Presenti 0</div> </div> </div>