本部構造は次のようになります隠しdivが常に同じ場所に表示されるようにするにはどうすればよいですか？
C：チェックボックスとDIV
H：隠されたDIV
V：可視DIV
[C1] [H1]
[C2] [H2]
[C3] [H3]
[C4] [H4] [C5] [H5]
いつc3とc4のチェックボックスをクリックすると、次のようになります。
[c1]
[C2]
[C3] [V3]
[C4] [V4]
[C5]
しかし、それは見えますこのように：
[C1] [V3]
[C2] [V4]
[C3]
[C4]
[C5]
私はブートストラップを使用しています"row"、 "col-md-4"
これは、チェックボックスや隠しdivのブートストラップクラスでは機能しません。独自のスタイリングを使用し、外側のdivでブートストラップを使用します。ここで
あなたが行く：
$("#c1").change(function() {
$("#h1").toggle();
});
$("#c2").change(function() {
$("#h2").toggle();
});
$("#c3").change(function() {
$("#h3").toggle();
});
$("#c4").change(function() {
$("#h4").toggle();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input id='c1' type='checkbox'> <span id='h1' style='display:none;'>h1</span></div>
<div><input id='c2' type='checkbox'> <span id='h2' style='display:none;'>h2</span></div>
<div><input id='c3' type='checkbox'> <span id='h3' style='display:none;'>h3</span></div>
<div><input id='c4' type='checkbox'> <span id='h4' style='display:none;'>h4</span></div>まずスタイルvisibility: hiddenを持つすべての隠されたdiv要素。それはdivをまだ隠してしまい、彼らはページに自分たちの場所を残すでしょう。
次に、対応するチェックボックスがクリックされると、visibility: visibleで表示されるようになります。
作業は質問で述べたように、私はそれが動作調べるために、全ページに行くcol-md-4を使用しているノート
$("#check3").change(function() {
$('#v3').css('visibility', 'visible');
});
$("#check4").change(function() {
$('#v4').css('visibility', 'visible');
});.hidden_div {
visibility: hidden;
}<!DOCTYPE html>
<html>
<head>
<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.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body >
<div class="container">
<div class="row">
<div class="col-md-4">
<input id="check1" type="checkbox" value="">
c1
</div>
<div class="col-md-4 hidden_div">
v1
</div>
</div>
<div class="row">
<div class="col-md-4">
<input id="check2" type="checkbox" value="">
c2
</div>
<div class="col-md-4 hidden_div">
v2
</div>
</div>
<div class="row">
<div class="col-md-4">
<input id="check3" type="checkbox" value="">
c3
</div>
<div id="v3" class="col-md-4 hidden_div">
v3
</div>
</div>
<div class="row">
<div class="col-md-4">
<input id="check4" type="checkbox" value="">
c4
</div>
<div id="v4" class="col-md-4 hidden_div">
v4
</div>
</div>
<div class="row">
<div class="col-md-4">
<input id="check5" type="checkbox" value="">
c5
</div>
<div class="col-md-4 hidden_div">
v5
</div>
</div>
</div>
</body>
</html>をスニペット。
あなたが現在持っているものとフィドル（スタックオーバーフローは何かが組み込まれています）を共有します。そうすることで、人々は正しいものになるまで編集するのが簡単になります。 – silvenon
'visibility：hidden;'を使用していますか？あなたのdivのを隠すには？もしそうでなければ、試してみて、彼らはまだスペースを取るべきです。 – Jouke