チェックボックスのサイズによって、他の要素が行の下に落ちる

Question

私はフォームグループを持っています。アドオンのある入力フィールドと、画像の横にあるチェックボックスと、隣にボタンがあり、隣に表示されます。チェックボックスの高さと幅に画像とボタンが移動したとき、なぜ私はそれを修正できますか？ここに私のコードは次のとおりです。

.box{ 
 
height: 34px; 
 
width: 34px; 
 
} 
 

 
.btn-default{ 
 
height: 34px; 
 
width: 34px; 
 
}

<div class="col-lg-12 form-group"> 
 
    <div class="pull-right"> 
 
    <img src="http://placehold.it/34x34"><input type="checkbox" class="box"> 
 
    <button type="button" class="btn btn-default">+</button> 
 
</div> 
 
<div> 
 
<div class="input-group"> 
 
    <span class="input-group-addon">@</span> 
 
    <input type="text" class="form-control"/> 
 
</div> 
 
</div> 
 
</div>

Answer 1

あなたは簡単にレイアウト を管理するために、グリッド・システムを使用することができます例の下

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<style> 
 
\t input.checkbox-input{height: 34px;width: 34px;margin-top: 0;} 
 
</style> 
 
<div class="container-fluid"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-lg-12 form-group"> 
 
\t \t \t \t \t <div class="col-md-1 col-sm-1 col-xs-1"> 
 
\t \t \t \t \t \t <img src="http://placehold.it/34x34"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-md-1 col-sm-1 col-xs-1"> 
 
\t \t \t \t \t \t <input type="checkbox" class="checkbox-input"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-md-1 col-sm-1 col-xs-1"> 
 
\t \t \t \t \t \t <button class="btn" value="+">+</button> 
 
\t \t \t \t \t </div> 
 
        <div class="col-md-9 col-xs-9 input-group"> 
 
\t \t \t \t \t <span class="input-group-addon">@</span> 
 
\t \t \t \t \t <input type="text" class="form-control"> 
 
\t \t \t \t  </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div>