【发布时间】：2016-04-17 13:39:32
【问题描述】：
我有 3 个 div。左侧 1 个 div，带有 col-lg-6。它旁边的 1 个 div 也带有 col-lg-6。我有第三个带有 col-lg-6 的 div。我希望第三个 div 始终低于 div 1，即使 div 3 变大。
我当前的代码：
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Toe voegen
</div>
<div class="panel-body">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#producten"
data-toggle="tab"
data-target="#producten, #productenoverzicht">Producten</a>
</li>
<li><a href="#promoties" data-toggle="tab"
data-target="#promoties, #promotiesoverzicht">Promoties</a>
</li>
<li><a href="#sterartikelken" data-toggle="tab"
data-target="#sterartikelken, #sterartikelkenoverzicht">Sterartikelen</a>
</li>
<li><a href="#T4" data-toggle="tab" data-target="#T4, #T4overzicht">T4</a>
</li>
<li id="gadget-add-list"><a href="#gadgets"
data-toggle="tab"
data-target="#gadgets, #gadgetoverzicht">Gadgets</a>
</li>
<li><a href="#lossestukken"
data-toggle="tab" data-target="#lossestukken, #lossestukkenoverzicht">Lossestukken</a>
</li>
<li id="artikelenVoucher-add-list"><a
href="#artikelenVoucher" data-toggle="tab"
data-target="#artikelenVoucher, #artikelenvouchersvoucheroverzicht">Voucher</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade in active" id="producten">
<div class="container-fluid">
<label for="selectcatagorie">Categorie</label><select
class="form-control" id="selectcatagorie">
<option value="" disabled selected>Selecteer een
categorie
</option>
<?php
foreach (db_select("SELECT * FROM presse_wit_categorie ORDER BY code ASC ") as $item) {
echo '<option ';
echo 'value = "' . $item['GUID'] . '">';
echo '(' . $item['code'] . ') ' . $item['description'];
echo '</ option>';
}
?>
</select>
<label for="selectproduct">Product</label><select id="selectproduct"
class="form-control"
style="visibility: hidden">
</select>
<label for="aantalproduct">Aantal</label><input id="aantalproduct"
class="form-control"
type="number"
value="1"/>
<br>
<div class="form-group">
<button type="button" class="btn btn-success"
onclick="addProduct('')"
id="addproductbutton">
Voeg
toe!
</button>
</div>
</div>
</div>
<div class="tab-pane fade" id="promoties">
<label for="selectPromotie">Promotie:</label><select id="selectPromotie"
class="form-control">
</select>
<label for="aantalPromoties">Aantal:</label><input id="aantalPromoties"
class="form-control"
type="number"
value="1"
/>
<br>
<div class="form-group">
<button type="button" class="btn btn-success"
onclick="addPromotie('')"
id="addpromotiebutton">
Voeg
toe!
</button>
</div>
</div>
<div class="tab-pane fade" id="sterartikelken">
<label for="selectSterArtikel">Ster Artikel:</label><select
id="selectSterArtikel"
class="form-control">
</select>
<label for="aantalSterArtikel">Aantal:</label><input id="aantalSterArtikel"
class="form-control"
type="number"
value="1"
/>
<br>
<div class="form-group">
<button type="button" class="btn btn-success"
onclick="addSterartikel('')"
id="addSterArtikelbutton">
Voeg
toe!
</button>
</div>
</div>
<div class="tab-pane fade" id="T4">
<label for="selectT4">T4:</label><select id="selectT4"
class="form-control"
>
</select>
<label for="aantalT4">Aantal:</label><input id="aantalT4"
class="form-control"
type="number"
value="1"
/>
<br>
<div class="form-group">
<button type="button" class="btn btn-success"
onclick="addT4('')"
id="addT4button">
Voeg
toe!
</button>
</div>
</div>
<div class="tab-pane fade" id="gadgets">
<label for="selectGadget">Gadget:</label><select id="selectGadget"
class="form-control"
>
</select>
<label for="aantalGadget">Aantal:</label><input id="aantalGadget"
class="form-control"
type="number"
value="1"
/>
<br>
<div class="form-group">
<button type="button" class="btn btn-success"
onclick="addGadget('')"
id="addGadgetbutton">
Voeg
toe!
</button>
</div>
</div>
<div class="tab-pane fade" id="lossestukken">
<label for="refLosstuk">Code</label><input id="refLosstuk" type="text"
class="form-control">
<label for="descLosstuk">Omschrijving</label><input id="descLosstuk" type="text"
class="form-control">
<label for="aantalLosstuk">Aantal:</label><input id="aantalLosstuk"
class="form-control"
type="number"
value="1"
/>
<label for="priceLosstuk">Prijs</label><input id="priceLosstuk" type="text"
class="form-control">
<br>
<div class="form-group">
<button type="button" class="btn btn-success"
onclick="addLosstuk('')"
id="addLosstukbutton">
Voeg
toe!
</button>
</div>
</div>
<div class="tab-pane fade" id="artikelenVoucher">
<div class="container-fluid">
<label for="selectcatagorievoucher">Categorie</label><select
class="form-control" id="selectcatagorievoucher">
<option value="" disabled selected>Selecteer een
categorie
</option>
<?php
foreach (db_select("SELECT * FROM presse_wit_categorie ORDER BY code ASC ") as $item) {
echo '<option ';
echo 'value = "' . $item['GUID'] . '">';
echo '(' . $item['code'] . ') ' . $item['description'];
echo '</ option>';
}
?>
</select>
<label for="selectproductvoucher">Product</label><select
id="selectproductvoucher"
class="form-control"
style="visibility: hidden">
</select>
<label for="aantalproductvoucher">Aantal</label><input
id="aantalproductvoucher"
class="form-control"
type="number"
value="1"/>
<br>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<button type="button" class="btn btn-success"
onclick="addProductVoucher('')"
id="addproductvoucherbutton">
Voeg
toe!
</button>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<label for="remainingVoucher">Overblijvend:</label><input
type="text"
id="remainingVoucher"
class="form-control"
value="€ 0,00"
disabled>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<label for="totaalVoucher">Totaal:</label><input type="text"
id="totaalVoucher"
class="form-control"
value="€ 0,00"
disabled>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6 ">
<div class="panel panel-default">
<div class="panel-heading">
Overzichten
</div>
<div class="panel-body">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="productenoverzicht">
<div class="table-responsive">
<table id="productstable" class="table table-hover">
<thead>
<tr>
<th>Code</th>
<th>Beschrijving</th>
<th>Prijs</th>
<th>Aantal</th>
<th>Totaal</th>
<th></th>
</tr>
</thead>
<tbody id="productstablebody">
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="promotiesoverzicht">
<div class="table-responsive">
<table id="promotiestable" class="table table-hover">
<thead>
<tr>
<th>Code</th>
<th>Beschrijving</th>
<th>Prijs</th>
<th>Aantal</th>
<th>Totaal</th>
<th></th>
</tr>
</thead>
<tbody id="promotiestablebody">
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="sterartikelkenoverzicht">
<div class="table-responsive">
<table id="sterartikelentable" class="table table-hover">
<thead>
<tr>
<th>Code</th>
<th>Beschrijving</th>
<th>Ster</th>
<th>Aantal</th>
<th></th>
</tr>
</thead>
<tbody id="sterartikelentablebody">
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="T4overzicht">
<div class="table-responsive">
<table id="T4table" class="table table-hover">
<thead>
<tr>
<th>Code</th>
<th>Beschrijving</th>
<th>Prijs</th>
<th>Aantal</th>
<th>Totaal</th>
<th></th>
</tr>
</thead>
<tbody id="T4tablebody">
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="gadgetoverzicht">
<div class="table-responsive">
<table id="gadgetstable" class="table table-hover">
<thead>
<tr>
<th>Code</th>
<th>Beschrijving</th>
<th>Prijs</th>
<th>Aantal</th>
<th>Totaal</th>
<th></th>
</tr>
</thead>
<tbody id="gadgetstablebody">
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="lossestukkenoverzicht">
<div class="table-responsive">
<table id="lossestukkentable" class="table table-hover">
<thead>
<tr>
<th>Code</th>
<th>Beschrijving</th>
<th>Prijs</th>
<th>Aantal</th>
<th>Totaal</th>
<th></th>
</tr>
</thead>
<tbody id="lossestukkentablebody">
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="artikelenvouchersvoucheroverzicht">
<div class="table-responsive">
<table id="artikelenvoucherstable" class="table table-hover">
<thead>
<tr>
<th>Code</th>
<th>Beschrijving</th>
<th>Prijs</th>
<th>Aantal</th>
<th>Totaal</th>
<th></th>
</tr>
</thead>
<tbody id="artikelenvoucherstablebody">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Totalen
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="totaalArtikelen">Totaal artikelen:</label><input type="text"
id="totaalArtikelen"
name="totaalArtikelen"
class="form-control"
value="€ 0,00"
disabled>
</div>
<div class="form-group">
<label for="totaalPromoties">Totaal promoties:</label><input type="text"
id="totaalPromoties"
name="totaalPromoties"
class="form-control"
value="€ 0,00"
disabled>
</div>
<div class="form-group">
<label for="totaalGadgets">Totaal gadgets:</label><input type="text"
id="totaalGadgets"
name="totaalGadgets"
class="form-control"
value="€ 0,00"
disabled>
</div>
<div class="form-group">
<label for="totaalLossestukken">Totaal lossestukken:</label><input
type="text"
id="totaalLossestukken"
name="totaalLossestukken"
class="form-control"
value="€ 0,00"
disabled>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<div class="form-group">
<label for="totaalT1">Totaal T1</label><input id="totaalT1"
name="totaalT1"
type="text"
class="form-control"
value="€ 0,00" disabled>
</div>
<label for="totaalT4">Totaal T4:</label><input type="text"
id="totaalT4"
name="totaalT4"
class="form-control"
value="€ 0,00"
disabled>
</div>
<div class="form-group">
<label for="totaalSterren">Totaal Sterren</label><input id="totaalSterren"
name="totaalSterren"
type="text"
class="form-control"
value="0" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label for="algemeenTotaal">Algemeen Totaal:</label><input
id="algemeenTotaal"
name="algemeenTotaal"
type="text"
class="form-control text-primary"
value="€ 0,00" disabled>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is an image of what is happening and what I would like to achieve:
提前谢谢你！
【问题讨论】：
-
贴出你认为有问题的具体代码sn-p。这段代码太大了。使用 Inspect Element 或类似的东西。
标签： javascript html css twitter-bootstrap twitter-bootstrap-3