Ik wil 2 kolommen weergeven met HTML (responsief). De 1e kolom, de naam van het evenement, terwijl de 2e kolom de tijd van het evenement is. Hoe ga ik hiermee om?
Hieronder is de screenshot die ik heb bijgevoegd.
Antwoord 1, autoriteit 100%
Dit is een fluitje van een cent met Bootstrap.
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
First Column
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
Second Column
</div>
</div>
</div>
Antwoord 2, autoriteit 20%
U kunt dit bereiken door de tag “table” te gebruiken:
<table>
<tr>
<td>column 1</td>
<td>column 2</td>
</tr>
</table>
Antwoord 3, autoriteit 20%
U moet een container maken, een rij toevoegen en twee kolommen in die rij maken.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
Column 1
</div>
<div class="col">
Column 2
</div>
</div>
</div>Antwoord 4
Maak een container en plaats het in de kolom. De gehele breedte van een browser is gelijk aan 12 kolommen, als u twee kolommen wilt, verdeel dan de 12 kolommen met 2 zodat het antwoord 6 kolommen is. Dit is een voorbeeld van een responsieve bootstrap 2 kolommen.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="col-lg-6 col-md-6 col-sm-12" style="background-color: red">
Column 1
</div>
<div class="col-lg-6 col-md-6 col-sm-12" style="background-color: green">
Column 2
</div
<div>
Uitgang:
Antwoord 5
<div class="container">
<div class="col-lg-6 col-md-6 >
Column 1
</div>
<div class="col-lg-6 col-md-6 >
Column 2
</div
<div>
Antwoord 6
U moet een tabel gebruiken. Zoiets als volgt:
<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Time</th>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>
</body>
</html>