我正在使用jQuery的.animate()函数来设置<div>孩子<input>聚焦时的宽度.但是,这会导致输入在触发事件时上下跳转.它似乎与之相关inline-block.

的jsfiddle

HTML

<div id="simp-inputs">
  <div>
    <label class="control-label" for="simp-date">Date: </label>
    <div class="input-group">
      <div class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></div>
      <input type="text" class="form-control" id="simp-date">
    </div>
  </div>
  <div>
    <label class="control-label" for="simp-start-time">Start Time: </label>
    <div class="input-group">
      <div class="input-group-addon"><span class="glyphicon glyphicon-time"></span></div>
      <input type="text" class="form-control" id="simp-start-time">
    </div>
  </div>
  <div>
    <label class="control-label" for="simp-end-time">End Time: </label>
    <div class="input-group">
      <div class="input-group-addon"><span class="glyphicon glyphicon-time"></span></div>
      <input type="text" class="form-control" id="simp-end-time">
    </div>
  </div>
  <div>
    <label class="control-label" for="simp-comments">Comments: </label>
    <div class="input-group">
      <div class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></div>
      <input type="text" class="form-control" …

对于以下工厂定义,列order必须是顺序的.已经有一个id自动递增的列.第一行的order应该开始在1每个额外行的order应该是下一个号码(1,2,3等)

$factory->define(App\AliasCommand::class, function (Faker\Generator $faker) {
    return [
        'user_id' => App\User::inRandomOrder()->first()->id,
        'command' => $faker->word,
        'content' => $faker->sentence,
        'order'   => (App\AliasCommand::count()) ?
            App\AliasCommand::orderBy('order', 'desc')->first()->order + 1 : 1
    ];
});

它应该将order列设置为比前一行多1,但是,它会导致所有行都被分配1.