Wie positioniere ich ein absolutes div nach einer Eingabe im Bootstrap?

Question

Alles, was ich will, ist nur eine absolute <div>a message</div> auf der rechten Seite eines Eingangs, so dass das Div statische Layout nicht beeinflussen. Aber ich fand den Standort falsch. Wie soll ich das machen?

$('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

Sie haben die Position relativ zum Anfang des Dokuments berechnet. Vermeiden Sie es daher, ein absolut positioniertes Element in einen Block zu platzieren.

Für absolut positionierte Elemente (die mit position: absolute oder position: fixed), the top property gibt den Abstand zwischen der oberen Randkante des Elements und dem oberen Rand des umschließenden Blocks.

Der erste relativ positionierte Elternblock wird zum umschließenden Block für absolut positionierte Elemente. In Ihrem Fall ist dies <div class="col-md-5">. Bootstrap fügt die Eigenschaft position: relative allen Spalten hinzu.

So verwenden

tip.appendTo('body')}); 

statt

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

Es gibt mehrere Möglichkeiten, dies zu tun. 3 einfachsten Möglichkeiten sind:

1. hinzufügen display:inline-block, um sowohl Ihre input und Ihre Nachricht div.
2. Fügen Sie float:left zu input hinzu.
3. Fügen Sie float:right zur Nachricht div hinzu.