所以我想让每个输入框都有一定的大小，有人告诉我必须为每个输入框创建一个新行才能做到这一点。一般来说，我对 Bootstrap 和编码还很陌生，所以我不确定如何解决这个问题。
如果版本很重要，我正在使用 Bootstrap 4..
它起作用了，但由于某种原因它从屏幕左侧消失了，您只能看到输入框的一半。
帮助将不胜感激。
<!DOCTYPE html>
<html>
<head>
<h1>Team Selector</h1>
</head>
<form>
<div class="form-group row">
<div class="col-xs-3">
<label for="inputsm">Player 1</label>
<input class="form-control input-sm" id="inputsm" type="text"
placeholder="Name here">
</div>
</div>
<div class="form-group row">
<div class="col-xs-3">
<label for="inputsm">Player 2</label>
<input class="form-control input-sm" id="inputsm" type="text"
placeholder="Name here">
</div>
</div>
<div class="form-group row">
<div class="col-xs-3">
<label for="inputsm">Player 3</label>
<input class="form-control input-sm" id="inputsm" type="text"
placeholder="Name here">
</div>
</div>
<div class="form group row">
<div class="form-group">
<label for="inputsm">Player 4</label>
<input class="form-control input-sm" id="inputsm" type="text"
placeholder="Name here">
</div>
</div>
</form>
</html>
最佳答案
使用 Bootstrap4，如果将 .row 添加到 .form-group 它将应用 row 类的属性，即
.row {
margin-right: -15px;
margin-left: -15px;
}
因此在您的情况下 margin-left: -15px 正在应用，因此缺少某些部分。所以要使单独的行尝试添加 col-12 或简单地删除 row
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group col-12">
<div class="col-3">
<label for="inputsm">Player 1</label>
<input class="form-control input-sm" id="inputsm" type="text"
placeholder="Name here">
</div>
</div>
<div class="form-group col-12">
<div class="col-3">
<label for="inputsm">Player 2</label>
<input class="form-control input-sm" id="inputsm" type="text"
placeholder="Name here">
</div>
</div>
<div class="form-group col-12">
<div class="col-3">
<label for="inputsm">Player 3</label>
<input class="form-control input-sm" id="inputsm" type="text"
placeholder="Name here">
</div>
</div>
<div class="form group col-12">
<div class="form-group">
<label for="inputsm">Player 4</label>
<input class="form-control input-sm" id="inputsm" type="text"
placeholder="Name here">
</div>
</div>
</form>关于javascript - Bootstrap : Input boxes go offscreen when making individual rows，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46557413/