Come possiamo rendere le righe/colonne bootstrap simili a un tavolo?

9

principio base su Tabella -> riga/colonna è che, in una particolare riga, colonne devono essere di uguale altezza qualunque sia il contenuto.

È possibile effettuare la tabella tabella -> struttura righe/colonne utilizzando la griglia di avvio ma ci sarà un problema con la colonna di altezze uguali.

Quindi, per questo scopo, ad esempio per colonne uguali, è possibile utilizzare la proprietà flexbox. (Non funziona in IE9 e meno in modo da essere sicuri circa il suo utilizzo.)

Check this fiddle here

Basta aggiungere seguente semplice CSS per un contenitore padre (per la completa cassa demo sopra violino),

.row-eq-height { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
}

Here is the reference

fonte

2016-07-07 16:08:55

5

Hai provato a utilizzare una tabella Bootstrap? In caso contrario, ti consiglio di farlo e di impostare i valori <td> con la larghezza desiderata. Per esempio:

<tr class="something"> 
<td class="col-md-2">A</td> 
<td class="col-md-3">B</td> 
<td class="col-md-6">C</td> 
<td class="col-md-1">D</td>

Source

fonte

2016-07-01 16:42:36

+0

Sì, ti consiglio anche di usare la tabella Bootstrap. Dopotutto è necessario modificare il comportamento del markup in modo che funzioni come un tavolo. –

2

ho fatto alcuni cambiamenti sul vostro codice. ma non so se è excately ciò che vi aspettate:

HTML:

<div class="container"> 
    <div class="row"> 
    <div class="image-column col-md-4"> 
     <img src="" alt="image" /> 
    </div> 
    <div class="image-column col-md-4"> 
     <img src="" alt="image" /> 
    </div> 
    <div class="image-column col-md-4"> 
     <img src="" alt="image" /> 
    </div> 
    </div> 

    <div class="row"> 
    <div class="content-column col-md-4"> 
     Some content here. Hello world! 
    </div> 
    <div class="content-column col-md-4"> 
     Some content here. Hello world! 
    </div> 
    <div class="content-column col-md-4"> 
     Some content here. Hello world! 
    </div> 
    </div> 
</div>

CSS:

/* CSS used here will be applied after bootstrap.css */ 

.container { 
    text-align: center; 
} 
.container .row { 
    display: flex; 
} 
.container .row:nth-child(even) { 
    background: gainsboro; 
} 
.container .content-column, .container .image-column { 
    border: 1px solid grey; 
} 
.container .row:not(:first-child) .content-column, .container .row:not(:first-child) .image-column { 
    border-top: 0px; 
} 
.container .content-column:not(:first-child), .container .image-column:not(:first-child) { 
    border-left: 0px; 
} 
.image-column { 
    padding: 5px; 
} 
.content-column { 
    border: 1px solid grey; 
    border-top: 0px; 
    font-size: 1.3em; 
} 
.content-column:not(:first-child) { 
    border-left: 0px; 
}

Risultato:

Verificare questo azione: http://www.bootply.com/1MaNWk0ybV

fonte

2016-07-04 18:30:56

1

Aigzy e Waldir stanno entrambi fornendo buone soluzioni, ma stanno facendo lo stesso errore. Le soluzioni che propongono non sono reattive. Sul cellulare la "tabella" non sarà più leggibile. Per evitare questo è necessario per nidificare le colonne di un livello di più, in questo modo:

<div class="row"> 
    <div class="col-md-4"> 
    <div class="col-md-12"> (image) </div> 
    <div class="col-md-12"> (text) </div> 
    </div> 
    <div class="col-md-4"> 
    <div class="col-md-12"> (image) </div> 
    <div class="col-md-12"> (text) </div> 
    </div> 
    <div class="col-md-4"> 
    <div class="col-md-12"> (image) </div> 
    <div class="col-md-12"> (text) </div> 
    </div> 
</div>

http://www.bootply.com/jYSePqMDGi

fonte

2016-07-04 20:49:17 JoostS

2

è possibile utilizzare visualizzazione consecutive: tavolo visualizzazione Colum: table-cell

fonte

2016-07-05 07:56:08

6

È possibile utilizzare table-responsive:

<html> 
 
<head> 
 
<title>Test</title> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
<div class="table-responsive"> 
 

 
    <table class="table table-bordered table-striped"> 
 
     <thead> 
 
      <tr> <td></td> <th>Chrome</th> <th>Firefox</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
       <th scope="row">Android</th> 
 
       <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> 
 
       <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> 
 
       <td class="text-muted" rowspan="3" style="vertical-align:middle">N/A</td> 
 
       <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td> 
 
       <td class="text-muted">N/A</td> 
 
      </tr> 
 
      <tr> 
 
       <th scope="row">iOS</th> 
 
       <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> 
 
       <td class="text-muted">N/A</td> 
 
       <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td> 
 
       <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> 
 
      </tr> 
 
      <tr> 
 
       <th scope="row">Mac OS X</th> 
 
       <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> 
 
       <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> 
 
       <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> 
 
       <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> 
 
      </tr> 
 
      <tr> 
 
       <th scope="row">Windows</th> 
 
       <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> 
 
       <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> 
 
       <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> 
 
       <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> 
 
       <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 

 
</div> 
 
</body> 
 
</html>

fonte

2016-07-06 06:57:39 Amit

+0

La migliore risposta, usando la via ufficiale da Bootstrap – dippas

3

Come tutti hanno detto prima, è possibile utilizzare i tag tabella. Ma se vuoi ancora usare div, puoi usare la griglia della griglia di Bootstrap per assicurarti che la tua tabella appaia ancora bene su tutte le dimensioni dello schermo. Ho modificato il codice in questo modo:

<style> 
    .table { 
     width: auto; 
     margin: 0 auto; 
     border: 1px solid red; 
    } 
    .table .row { 
     display: -webkit-flex; 
     display: -ms-flexbox; 
     display: flex; 
     -webkit-flex-wrap: wrap; 
     -ms-flex-wrap: wrap; 
     flex-wrap: wrap; 
    } 
    .table .row div { 
     border: 1px solid red; 
    } 
</style> 

<div class="table"> 

    <div class="row"> 
     <div class="col-lg-4 col-md-4 col-sm-4"> 
      <img src="image1.jpg" alt="image1"> 
      Some content here. Hello stackoverflow! 
     </div> 
     <div class="col-lg-8 col-md-8 col-sm-8"> 
      Some content here. Hello world! 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-lg-4 col-md-4 col-sm-4"> 
      <img src="image2.jpg" alt="image2"> 
      Some content here. Hello stackoverflow! 
     </div> 
     <div class="col-lg-8 col-md-8 col-sm-8"> 
      Some content here. Hello world! 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-lg-4 col-md-4 col-sm-4"> 
      <img src="image3.jpg" alt="image3"> 
      Some content here. Hello stackoverflow! 
     </div> 
     <div class="col-lg-8 col-md-8 col-sm-8"> 
      Some content here. Hello world! 
     </div> 
    </div> 

</div>

Come potete vedere, ho usato display: flex; e flex-wrap: wrap; sul .row per rendere le cellule della stessa altezza.

Buona fortuna!

fonte

2016-07-06 15:32:17 JoeMecPak

2

Si prega di consultare la DEMO di lavoro..Questo è esattamente ciò che serve ....Spero che ti aiuti un po '.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container" > 
 
    <div class="row" style="border: 1px solid grey;"> 
 
    <div class="col-md-4 col-sm-4 col-xs-4 text-center" style="border-right:1px solid grey"> 
 
    <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" width="20" height="20" class="img-circle"/> 
 
    </div> 
 
    <div class="col-md-4 col-sm-4 col-xs-4 text-center" style="border-right:1px solid grey"> 
 
    <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" width="20" height="20" class="img-circle"/> 
 
    </div> 
 
    <div class="col-md-4 col-sm-4 col-xs-4 text-center" style="border-right:1px solid grey"> 
 
     <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" width="20" height="20" class="img-circle"/> 
 
    </div> 
 
    </div> 
 
<div class="row" style="border: 1px solid grey;background-color:#f3f3f3"> 
 
    <div class="col-md-4 col-sm-4 col-xs-4 text-center" style="border-right:1px solid grey"> 
 
    <strong>Yes</strong> 
 
    </div> 
 
    <div class="col-md-4 col-sm-4 col-xs-4 text-center" style="border-right:1px solid grey"> 
 
     <strong>Yes</strong> 
 
    </div> 
 
    <div class="col-md-4 col-sm-4 col-xs-4 text-center" style="border-right:1px solid grey"> 
 
     <strong>Yes</strong> 
 
    </div> 
 
    </div> 
 
</div>

fonte

2016-07-07 12:43:45

2

Ecco il codice per il problema potrebbe essere questo può aiutarti.

controllare questo link violino JSFiddle

CODICE HTML

<div style="width: 900px; margin: 0 auto;display:table-cell; border: 1px solid red;"> 
    <div class="row"> 
    <div class="col-md-4 tableColumnDiv"> 
     <img src="" alt="image"> Some content here. Hello stackoverflow! 
    </div> 
    <div class="col-md-8 tableColumnDiv"> 
     Some content here. Hello world! 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-4 tableColumnDiv"> 
     <img src="" alt="image"> Some content here. Hello stackoverflow! 
    </div> 
    <div class="col-md-8 tableColumnDiv"> 
     Some content here. Hello world! 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-4 tableColumnDiv"> 
     <img src="" alt="image"> Some content here. Hello stackoverflow! 
    </div> 
    <div class="col-md-8 tableColumnDiv"> 
     Some content here. Hello world! 
    </div> 
    </div> 
</div>

codice CSS

.image-column { 
    border: 1px solid black; 
} 
.tableColumnDiv{ 
    display:table-cell; 
    border: 1px solid black; 
}

fonte

2016-07-07 18:44:37

1

Here is the working code: Bootply link

2 fasi:

Aggiungi una classe in più (.row-table) per .row e assegnare i seguenti css proprietà.

.row-table{ display:flex; 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox;}

Aggiungi una classe in più al nostro .table-cell col-x-x e assegnare i seguenti css proprietà.

.table-cell{ border-color: black; border-style:solid; border-width:1px 0 0 1px;} 
.row-table .table-cell:last-child{ border-right-width:1px;} 
.row-table:last-child .table-cell{ border-bottom-width:1px;}

Nota: larghezza della colonna dipende dalle classi griglia di colonne che si usa.

fonte

2016-07-09 10:05:05 vishnu

1

Prova questa e leggere i commenti in zona CSS: http://www.bootply.com/byopZWzR2K

Questo codice risolverà l'allineamento verticale di una cella.

Qui è lo stesso codice anche:

CSS

/* This play-area class is just for testing and aligned the width of this table */ 
.play-area{width:400px;margin:19px auto} 
.play-area img{height:32px;} 

.make-this-table{border:1px solid #d7d7d7;overflow:hidden;} /* this to give our table outer border */ 
.make-this-table .row{border-top:1px solid #d7d7d7;background:#e7e7e7} /* This simple to add separator line between each row also to give each row background color */ 
.make-this-table .row:nth-child(1){border:none;background:#c5c5c5} /* This to ignore the separator for the first row since it will be the head of this table. You can remove this line to have this table without head */ 


/* This code to make rows in alternative background colors */ 
.make-this-table .row:nth-child(even) {background:#fff} 


/* This to make the text vertical align in middle if the next column in the same row has more than one line while the first column just one line like the second row in this table .. You can remove this line if you like to make the alignment at the top of the cell. */ 
.make-this-table .row{align-items: center;display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}

-

HTML

<div class="play-area"> 
<div class="make-this-table"> 

    <div class="row"> 
    <div class="col-md-4 col-xs-4"> 
     <img src="http://www.chromium.org/_/rsrc/1438811752264/chromium-projects/logo_chrome_color_1x_web_32dp.png" alt="" style=""> 
    </div> 
    <div class="col-md-8 col-xs-8"> 
     <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" alt="" style="width:32px;"> 
    </div> 
    </div> 

    <div class="row"> 
    <div class="col-md-4 col-xs-4"> 
     Chrome Browser. 
    </div> 
    <div class="col-md-8 col-xs-8"> 
     Firefox Browser. 
    </div> 
    </div> 

    <div class="row"> 
    <div class="col-md-4 col-xs-4"> 
     Updated. 
    </div> 
    <div class="col-md-8 col-xs-8"> 
     Not Updated<br>New line.<br>Now firefox is updated. 
    </div> 
    </div> 

    <div class="row"> 
    <div class="col-md-4 col-xs-4"> 
     Try new line. 
    </div> 
    <div class="col-md-8 col-xs-8"> 
     Adding image to break line: <img src="http://www.w3schools.com/images/compatible_edge.gif" alt=""> 
    </div> 
    </div> 

    <div class="row"> 
    <div class="col-md-4 col-xs-4"> 
     Keep trying .. 
    </div> 
    <div class="col-md-8 col-xs-8"> 
     Also keep trying Ya labba .. 
    </div> 
    </div> 


</div> 
</div>

fonte

2016-07-09 12:43:34

1

ne dite seguente aproach:

bootply example

utilizza CSS per impostare la visualizzazione, per le colonne hanno la stessa altezza. Trovato il CSS al seguente link:

equal height columns example

fonte

2016-07-10 12:22:52

1

Nel vostro secondo esempio ho cambiato l'immagine-colonna e contenuti colonne, il suo funzionamento .. Prova questo può aiutare a ...

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<style> 
 
    /* CSS used here will be applied after bootstrap.css */ 
 
    
 
    .row { 
 
     display: flex; 
 
    } 
 
    
 
    .image-column { 
 
     border: 1px solid black; 
 
    } 
 
    
 
    .content-column { 
 
     border: 1px solid black; 
 
    } 
 
</style> 
 
<div style="width: 90%; margin: 0 auto;"> 
 

 
    <div class="row"> 
 
     <div class="col-md-4 image-column"> 
 
      <img src="http://icons.iconarchive.com/icons/google/chrome/72/Google-Chrome-icon.png" alt="image"> Some content here. 
 
     </div> 
 

 
     <div class="col-md-8 content-column"> 
 
      Some content here. Hello world! 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-md-4 image-column"> 
 
      <img src="http://icons.iconarchive.com/icons/google/chrome/72/Google-Chrome-icon.png" alt="image"> Some content here. 
 
     </div> 
 
     <div class="col-md-8 content-column"> 
 
      Some content here. Hello world! 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-md-4 image-column"> 
 
      <img src="http://icons.iconarchive.com/icons/google/chrome/72/Google-Chrome-icon.png" alt="image"> Some content here. 
 
      </div> 
 
      <div class="col-md-8 content-column"> 
 
       Some content here. Hello world! 
 
      </div> 
 
     </div> 
 

 
    </div>

fonte

2016-07-11 06:17:54 Mani

Come possiamo rendere le righe/colonne bootstrap simili a un tavolo?

risposta

Problemi correlati