我的网站存在问题。我正在使用引导标签浏览我的网站。除最后一个选项卡外，所有选项卡都正常他将最后一个的内容与之前的内容混合在一起。 我不是编码员所以我认为我的代码看起来很糟糕。我从不同的网站复制和粘贴。所以，如果你有改进，请告诉我。
The .... in the red circle should be underneath the planning tab
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Duiklog</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link href="./bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Welkom bij mijn duiklog</h1>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#Duiklog" aria-controls="Duiklog" role="tab" data-toggle="tab">Duiklog</a></li>
<li role="presentation"><a href="#invoer" aria-controls="invoer" role="tab" data-toggle="tab">Invoer</a></li>
<li role="presentation"><a href="#planning" aria-controls="planning" role="tab" data-toggle="tab">Planning</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<h2>Stats</h2><br>
Aantal duiken: 2<br>
Gemiddeld lucht verbruikt: 22.5000
</div>
<div role="tabpanel" class="tab-pane" id="Duiklog">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Datum</th>
<th>Locatie</th>
<th>Buddy</th>
<th>Diepte</th>
<th>Duiktijd</th>
<th>Watertype</th>
<th>Zicht</th>
<th>Temp</th>
<th>Duiktype</th>
<th>Fles</th>
<th>Druk start</th>
<th>Druk einde</th>
<th>Druk verbruikt</th>
<th>Lucht verbruikt</th>
<th>Opmerkingen</th>
</tr>
</thead>
<tbody>
<tr><td>2</td><td>2012-05-20</td><td>boschmolenplas</td><td>Harrie Wassen</td><td>11 m </td><td>39 min </td><td>Zoet</td><td>3-6 m </td><td>13 C </td><td>opleiding</td><td>10 l </td><td>200 bar </td><td>10 bar </td><td>190 bar </td><td>23ltr/min </td><td></td></tr><tr><td>1</td><td>2012-05-13</td><td>Panheel</td><td>Harrie Wassen</td><td>9 m </td><td>40 min </td><td>Zoet</td><td>3-6 m </td><td>13 C </td><td>opleiding</td><td>10 l </td><td>210 bar </td><td>40 bar </td><td>170 bar </td><td>22ltr/min </td><td>eerste duik</td></tr></table>
</div>
<div role="tabpanel" class="tab-pane" id="invoer">
<form action="send_post.php" method="post">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="datum">Datum:</label>
<div class="col-sm-10">
<input type="date" class="form-control" name="idatum" >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="locatie">Locatie:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="ilocatie" placeholder="Voer locatie in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="buddy">Buddy:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="ibuddy" placeholder="Voer buddy in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="diepte">Diepte:</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="idiepte" placeholder="Voer maximale diepte in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="duiktijd">Duiktijd:</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="iduiktijd" placeholder="Voer duiktijd in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="drukstart">Drukstart:</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="idrukstart" placeholder="Voer begindruk in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="drukeinde">Drukeinde:</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="idrukeinde" placeholder="Voer eindedruk in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="watertype">Watertype:</label>
<div class="col-sm-10">
<select class="form-control" name="iwatertype">
<option>Zoet</option>
<option>Zout</option>
<option>Brak</option>
</select>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="zicht">Zicht:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="izicht" placeholder="Voer zicht in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="temperatuur">Temperatuur:</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="itemperatuur" placeholder="Voer temperatuur in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="duiktype">Duiktype:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="iduiktype" placeholder="Voer Duiktype in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="flesvolume">Flesvolume:</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="iflesvolume" placeholder="Voer flesvolume in">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="opmerkingen">Opmerkingen:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="iopmerkingen" placeholder="Opmerkingen">
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="planning">
.....
</div>
<div class="container" style="padding-bottom: 75px;">
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">
Connectie met duiklog
答案 0 :(得分：0)
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Duiklog</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<h1>Welkom bij mijn duiklog</h1>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#Duiklog" aria-controls="Duiklog" role="tab" data-toggle="tab">Duiklog</a></li>
<li role="presentation"><a href="#invoer" aria-controls="invoer" role="tab" data-toggle="tab">Invoer</a></li>
<li role="presentation"><a href="#planning" aria-controls="planning" role="tab" data-toggle="tab">Planning</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<h2>Stats</h2><br>
Aantal duiken: 2<br>
Gemiddeld lucht verbruikt: 22.5000
</div>
<div role="tabpanel" class="tab-pane" id="Duiklog">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Datum</th>
<th>Locatie</th>
<th>Buddy</th>
<th>Diepte</th>
<th>Duiktijd</th>
<th>Watertype</th>
<th>Zicht</th>
<th>Temp</th>
<th>Duiktype</th>
<th>Fles</th>
<th>Druk start</th>
<th>Druk einde</th>
<th>Druk verbruikt</th>
<th>Lucht verbruikt</th>
<th>Opmerkingen</th>
</tr>
</thead>
<tbody>
<tr><td>2</td><td>2012-05-20</td><td>boschmolenplas</td><td>Harrie Wassen</td><td>11 m </td><td>39 min </td><td>Zoet</td><td>3-6 m </td><td>13 C </td><td>opleiding</td><td>10 l </td><td>200 bar </td><td>10 bar </td><td>190 bar </td><td>23ltr/min </td><td></td></tr><tr><td>1</td><td>2012-05-13</td><td>Panheel</td><td>Harrie Wassen</td><td>9 m </td><td>40 min </td><td>Zoet</td><td>3-6 m </td><td>13 C </td><td>opleiding</td><td>10 l </td><td>210 bar </td><td>40 bar </td><td>170 bar </td><td>22ltr/min </td><td>eerste duik</td></tr></table>
</div>
<div role="tabpanel" class="tab-pane" id="invoer">
<form action="send_post.php" method="post">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="datum">Datum:</label>
<div class="col-sm-10">
<input type="date" class="form-control" name="idatum" >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="locatie">Locatie:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="ilocatie" placeholder="Voer locatie in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="buddy">Buddy:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="ibuddy" placeholder="Voer buddy in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="diepte">Diepte:</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="idiepte" placeholder="Voer maximale diepte in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="duiktijd">Duiktijd:</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="iduiktijd" placeholder="Voer duiktijd in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="drukstart">Drukstart:</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="idrukstart" placeholder="Voer begindruk in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="drukeinde">Drukeinde:</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="idrukeinde" placeholder="Voer eindedruk in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="watertype">Watertype:</label>
<div class="col-sm-10">
<select class="form-control" name="iwatertype">
<option>Zoet</option>
<option>Zout</option>
<option>Brak</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="zicht">Zicht:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="izicht" placeholder="Voer zicht in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="temperatuur">Temperatuur:</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="itemperatuur" placeholder="Voer temperatuur in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="duiktype">Duiktype:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="iduiktype" placeholder="Voer Duiktype in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="flesvolume">Flesvolume:</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="iflesvolume" placeholder="Voer flesvolume in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="opmerkingen">Opmerkingen:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="iopmerkingen" placeholder="Opmerkingen">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="planning">
this is working
</div>
检查此代码这是否正常工作，请点击链接
答案 1 :(得分：0)
您的HTML代码有很多错误，未关闭的标签等。以下代码是您尝试执行的有效版本：
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#Duiklog" aria-controls="Duiklog" role="tab" data-toggle="tab">Duiklog</a></li>
<li role="presentation"><a href="#invoer" aria-controls="invoer" role="tab" data-toggle="tab">Invoer</a></li>
<li role="presentation"><a href="#planning" aria-controls="planning" role="tab" data-toggle="tab">Planning</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<h2>Stats</h2>
<br> Aantal duiken: 2
<br> Gemiddeld lucht verbruikt: 22.5000
</div>
<div role="tabpanel" class="tab-pane" id="Duiklog">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Datum</th>
<th>Locatie</th>
<th>Buddy</th>
<th>Diepte</th>
<th>Duiktijd</th>
<th>Watertype</th>
<th>Zicht</th>
<th>Temp</th>
<th>Duiktype</th>
<th>Fles</th>
<th>Druk start</th>
<th>Druk einde</th>
<th>Druk verbruikt</th>
<th>Lucht verbruikt</th>
<th>Opmerkingen</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2012-05-20</td>
<td>boschmolenplas</td>
<td>Harrie Wassen</td>
<td>11 m</td>
<td>39 min</td>
<td>Zoet</td>
<td>3-6 m</td>
<td>13 C</td>
<td>opleiding</td>
<td>10 l</td>
<td>200 bar</td>
<td>10 bar</td>
<td>190 bar</td>
<td>23ltr/min</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>2012-05-13</td>
<td>Panheel</td>
<td>Harrie Wassen</td>
<td>9 m</td>
<td>40 min</td>
<td>Zoet</td>
<td>3-6 m</td>
<td>13 C</td>
<td>opleiding</td>
<td>10 l</td>
<td>210 bar</td>
<td>40 bar</td>
<td>170 bar</td>
<td>22ltr/min</td>
<td>eerste duik</td>
</tr>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="invoer">
<form action="send_post.php" method="post" class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="datum">Datum:</label>
<div class="col-sm-10">
<input id="datum" type="date" class="form-control" name="idatum">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="locatie">Locatie:</label>
<div class="col-sm-10">
<input id="locatie" type="text" class="form-control" name="ilocatie"
placeholder="Voer locatie in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="buddy">Buddy:</label>
<div class="col-sm-10">
<input id="buddy" type="text" class="form-control" name="ibuddy" placeholder="Voer buddy in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="diepte">Diepte:</label>
<div class="col-sm-10">
<input id="diepte" type="number" class="form-control" name="idiepte"
placeholder="Voer maximale diepte in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="duiktijd">Duiktijd:</label>
<div class="col-sm-10">
<input id="duiktijd" type="number" class="form-control" name="iduiktijd"
placeholder="Voer duiktijd in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="drukstart">Drukstart:</label>
<div class="col-sm-10">
<input id="drukstart" type="number" class="form-control" name="idrukstart"
placeholder="Voer begindruk in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="drukeinde">Drukeinde:</label>
<div class="col-sm-10">
<input id="drukeinde" type="number" class="form-control" name="idrukeinde"
placeholder="Voer eindedruk in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="watertype">Watertype:</label>
<div class="col-sm-10">
<select id="watertype" class="form-control" name="iwatertype">
<option>Zoet</option>
<option>Zout</option>
<option>Brak</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="zicht">Zicht:</label>
<div class="col-sm-10">
<input id="zicht" type="text" class="form-control" name="izicht"
placeholder="Voer zicht in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"
for="temperatuur">Temperatuur:</label>
<div class="col-sm-10">
<input id="temperatuur" type="number" class="form-control" name="itemperatuur"
placeholder="Voer temperatuur in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"
for="duiktype">Duiktype:</label>
<div class="col-sm-10">
<input id="duiktype" type="text" class="form-control" name="iduiktype"
placeholder="Voer Duiktype in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="flesvolume">Flesvolume:</label>
<div class="col-sm-10">
<input id="flesvolume" type="number" class="form-control" name="iflesvolume"
placeholder="Voer flesvolume in">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"
for="opmerkingen">Opmerkingen:</label>
<div class="col-sm-10">
<input id="opmerkingen" type="text" class="form-control"
name="iopmerkingen" placeholder="Opmerkingen">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">
Submit
</button>
</div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="planning">
.....
</div>
</div>
</div>