如何在bootstrap输入后定位绝对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">。 Bootstrap将position: relative属性添加到其所有列。

所以使用

tip.appendTo('body')});

而不是

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

有几种方法可以做到这一点。最简单的方法是：

1. 将display:inline-block添加到您的input和您的邮件div。
2. 将float:left添加到input。
3. 将float:right添加到邮件div。