ブートストラップの入力後に絶対divを配置する方法は？

Question

私が望むのは、入力の右側に絶対<div>a message</div>を作成するだけです。そのため、divは静的レイアウトに影響しません。しかし、私は場所が間違っていたことを発見した。私はどうすればいいのですか？

$('input').each(function(i, input){ 
 
    var input = $(input); 
 
    var top = input.offset().top; 
 
    var left = input.offset().left+input.outerWidth(); 
 
    var attrs = {top:top, left:left, position:'absolute'}; 
 
    input.focus(function(){ 
 
    var tip = $('<div>a message</div>'); 
 
    tip.css(attrs); 
 
    tip.insertAfter(input)}); 
 
});

<link href="http://cdn.jarsj.cn/bootstrap.min.css" rel="stylesheet"> 
 

 
<div class="container-fluid"> 
 
    <div class="page-header"> 
 
    <h1>Test Page</h1> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-2"> 
 
     <ul class="nav nav-pills nav-stacked"> 
 
     <li role="presentation"><a href="/">Home</a></li> 
 
     <li role="presentation"><a href="profile">Profile</a></li> 
 
     <li role="presentation"><a href="messages">Messages</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="col-md-5"> 
 
     <div class="panel panel-primary"> 
 
     <div class="panel-heading">fill the form please.</div> 
 
     <div class="panel-body"> 
 
     <form> 
 
      <div class="form-group"> 
 
      <label for="username">username</label> 
 
      <input type="text" class="form-control" id="username_id" name="username"> 
 
      </div> 
 
      <button type="submit" class="btn btn-default">Submit</button> 
 
     </form> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="http://cdn.jarsj.cn/jquery-1.11.0.min.js"></script> 
 
<script src="http://cdn.jarsj.cn/bootstrap.min.js"></script>

Answer 1

文書の先頭からの相対的な位置を計算しました。絶対配置された要素をどのブロックにも配置しないでください。絶対配置要素（position: absolute又はposition: fixed有するもの）について

、the top property要素の上部マージン辺とを含むブロックの上端の間の距離を指定します。

相対的に最初に配置された親ブロックは、絶対配置された要素の包含ブロックになります。あなたの場合、これは<div class="col-md-5">です。ブートストラップは、すべての列にposition: relativeプロパティを追加します。

だからではなく、正確にあなたが "メッセージ" を表示させたいん

tip.insertAfter(input)}); 

$('input').each(function(i, input){ 
 
    var input = $(input); 
 
    var top = input.offset().top; 
 
    var left = input.offset().left+input.outerWidth(); 
 
    var attrs = {top:top, left:left, position:'absolute'}; 
 
    input.focus(function(){ 
 
    var tip = $('<div>a message</div>'); 
 
    tip.css(attrs); 
 
    tip.appendTo('body')}); 
 
});

<link href="http://cdn.jarsj.cn/bootstrap.min.css" rel="stylesheet"> 
 

 
<div class="container-fluid"> 
 
    <div class="page-header"> 
 
    <h1>Test Page</h1> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-2"> 
 
     <ul class="nav nav-pills nav-stacked"> 
 
     <li role="presentation"><a href="/">Home</a></li> 
 
     <li role="presentation"><a href="profile">Profile</a></li> 
 
     <li role="presentation"><a href="messages">Messages</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="col-md-5"> 
 
     <div class="panel panel-primary"> 
 
     <div class="panel-heading">fill the form please.</div> 
 
     <div class="panel-body"> 
 
      <form enctype="multipart/form-data" method="post"> 
 
      <p> 
 
       <label for="username">user</label> 
 
       <input id="id_username" name="username" type="text" /> 
 
      </p> 
 
      <input type="submit" value="submit"/> 
 
      </form> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="http://cdn.jarsj.cn/jquery-1.11.0.min.js"></script> 
 
<script src="http://cdn.jarsj.cn/bootstrap.min.js"></script>

Answer 2

これを行うには、いくつかの方法があります。 3最も簡単な方法は、以下のとおりです。

1. はあなたのinputとあなたのメッセージdivの両方にdisplay:inline-blockを追加します。
2. float:left~inputを追加します。
3. float:rightをメッセージdivに追加します。