我有一个Bootstrap 4表单，用于收集联系信息。
<form class="form-compact" action="">
<div class="row paddingBottom20">
<div class="container col-4">
<div class="row">
<h6 class="text-center col-12 mb-0">Contact Information</h6>
<sub class="text-right text-muted col-12"><a href="#" tabindex="-1"><i class="far fa-edit"></i></a></sub>
</div>
<div class="dropdown-divider mb-3"></div>
<div class="form-group row">
<label for="firstName" class="col-4 col-form-label-sm text-right">First Name:</label>
<div class="col-8">
<div class="input-group">
<input id="firstName" name="text" type="text" class="form-control form-control-sm" readonly>
</div>
</div>
</div>
<div class="form-group row align-items-center">
<label for="lastName" class="col-4 col-form-label-sm text-right">Last Name:</label>
<div class="col-8">
<div class="input-group">
<input id="lastName" name="text" type="text" class="form-control form-control-sm" readonly>
</div>
</div>
</div>
<div class="form-group row align-items-center">
<label for="position" class="col-4 col-form-label-sm text-right">Position:</label>
<div class="col-8">
<div class="input-group">
<select id="position" class="form-control" disabled>
<option></option>
<option>Shift Supervisor</option>
<option>Airport Manager</option>
<option>District Manager</option>
<option>Regional Manager</option>
<option>Terrirory Performance Manager</option>
<option>Ops. Manage</option>
<option>Other</option>
</select>
</div>
</div>
</div>
<div class="form-group row align-items-center">
<label for="emailAddress" class="col-4 col-form-label-sm text-right">Email Address:</label>
<div class="col-8">
<div class="input-group">
<input id="emailAddress" name="text" type="email" class="form-control form-control-sm">
</div>
</div>
</div>
<div class="form-group row align-items-center">
<label for="office" class="col-4 col-form-label-sm text-right">Office:</label>
<div class="col-8">
<div class="input-group">
<input id="office" name="text" type="number" class="form-control form-control-sm" readonly>
</div>
</div>
</div>
<div class="form-group row align-items-center">
<label for="cell" class="col-4 col-form-label-sm text-right">Cell:</label>
<div class="col-8">
<div class="input-group">
<input id="cell" name="text" type="number" class="form-control form-control-sm" readonly>
</div>
</div>
</div>
</div>
<div class="container col-4" disabled>
<div class="row">
<h6 class="text-center col-12 mb-0">Notification Emails Received</h6>
<sub class="text-right text-muted col-12"><a href="#" tabindex="-1"><i class="far fa-edit"></i></a></sub>
</div>
<div class="dropdown-divider"></div>
<div class="col-12 text-center mb-2">
<small class="text-muted small d-none">Select all that apply</small>
</div>
<div class="row">
<div class="col-6 text-left">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
24hr Notifications
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
48hr Notifications
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="Checkbox3">
<label class="form-check-label" for="defaultCheck1">
VIP Watch List
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="Checkbox4">
<label class="form-check-label" for="defaultCheck2">
BoD Member
</label>
</div>
</div>
<div class="col-6 text-left">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="Checkbox1">
<label class="form-check-label text-center" for="defaultCheck1">
FBO Deliveries
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="Checkbox2">
<label class="form-check-label" for="defaultCheck2">
FBO Returns
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="Checkbox5">
<label class="form-check-label" for="defaultCheck1">
Sensitive Accts
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="Checkbox6">
<label class="form-check-label" for="defaultCheck2">
Escalations
</label>
</div>
</div>
</div>
</div>
<div class="container col-4">
<div class="row">
<h6 class="text-center col-12 mb-0">Location Connections</h6>
<sub class="text-right text-muted col-12"><a href="#" tabindex="-1">Edit <i class="far fa-edit"></i></a></sub>
</div>
<div class="dropdown-divider"></div>
<div class="row">
<div class="col-12 text-center mb-2">
<small class="text-muted small">On the distribution list of the following locations<br /></small>
</div>
<span class="col-12 text-left">
<a href=# class="badge badge-pill badge-success" tabindex="-1">ABC</a>
<a href=# class="badge badge-pill badge-success" tabindex="-1">DEF</a>
<a href=# class="badge badge-pill badge-success" tabindex="-1">GHI</a>
<a href=# class="badge badge-pill badge-success" tabindex="-1">JKL</a>
<a href=# class="badge badge-pill badge-success" tabindex="-1">MNO</a>
<a href=# class="badge badge-pill badge-success" tabindex="-1">PQR</a>
<a href=# class="badge badge-pill badge-success" tabindex="-1">STU</a>
<a href=# class="badge badge-pill badge-success" tabindex="-1">VWX</a>
<a href=# class="badge badge-pill badge-success" tabindex="-1">YZA</a>
<a href=# class="badge badge-pill badge-success" tabindex="-1">ABC</a>
<a href=# class="badge badge-pill badge-success" tabindex="-1">DEF</a>
<a href=# class="badge badge-pill badge-success" tabindex="-1">GHI</a>
<a href=# class="badge badge-pill badge-success" tabindex="-1">JKL</a>
<a href=# class="badge badge-pill badge-success" tabindex="-1">MNO</a>
<a href=# class="badge badge-pill badge-success" tabindex="-1">PQR</a>
<a href=# class="badge badge-pill badge-success" tabindex="-1">STU</a>
<a href=# class="badge badge-pill badge-success" tabindex="-1">VWX</a>
<a href=# class="badge badge-pill badge-success" tabindex="-1">YZA</a>
</span>
</div>
</div>
</div>
</form>
该表单分为三列，每列具有类col-4。
第一列中的项目包括电子邮件地址输入。
我正在寻找的是一种使电子邮件地址输入在获得焦点时可以扩展到比父div更右的宽度的方法。
谢谢
答案 0 :(得分：0)
您可以为输入的事件“ focus”和“ focusout”添加一个处理程序，对于每个事件，您都需要做一些事情。
例如，这是'focus'事件的处理程序，我在输入中添加了id'emailAddress'：
$('#emailAddress').on('focus', function(){
widthColumn = $('#contact').width();
$(this).width((widthColumn*2) - $('#emailLabel').width());
});
我得到了包含联系信息的列的宽度，我已经向该列添加了id“ contact”，然后使用'.width（）'方法放置了计算出的宽度。
这是'focusout'事件的处理程序：
$('#emailAddress').focusout(function(){
$(this).width($('#firstName').width());
})
在这里，我只输入我们未更改的其他输入的宽度。
我们还必须添加一些CSS规则：
#emailAddress{
position: absolute;
width: 100%;
}
Here，您可以看到完整的示例。
答案 1 :(得分：0)
这有点骇人听闻，但您实际上可以在普通CSS中做到这一点。请注意，由于位置属性的更改，这将中断宽度转换。
.extendable:focus {
position: absolute;
width: 110%;
top: -1rem;
}
Here是您的代码示例中的一个有效示例。