Javascript 引导：当生成单个行时，输入框将脱离屏幕_Javascript_Html_Css_Twitter Bootstrap

Javascript 引导：当生成单个行时，输入框将脱离屏幕

javascript html css twitter-bootstrap

Javascript 引导：当生成单个行时，输入框将脱离屏幕,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,所以我想让每个输入框都有一个特定的大小，我被告知我必须为每个输入框做一个新行才能做到这一点。一般来说，我对引导和编码都很陌生，所以我不知道如何解决这个问题如果版本重要的话，我使用的是Bootstrap 4 它起作用了，但由于某种原因，它会从屏幕左侧消失，您只能看到输入框的一半我们将不胜感激 <!DOCTYPE html> <html> <head> <h1>Team Selector</h1> </head> &l

所以我想让每个输入框都有一个特定的大小，我被告知我必须为每个输入框做一个新行才能做到这一点。一般来说，我对引导和编码都很陌生，所以我不知道如何解决这个问题

如果版本重要的话，我使用的是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>


团队选择器
玩家1
玩家2
玩家3
玩家4

使用Bootstrap4，如果将

.row

添加到

.formgroup

中，它将应用

row

类的属性，该属性为

.row {
margin-right: -15px;
margin-left: -15px;
}

因此，在您的情况下，

左边距：-15px

正在应用，因此缺少某些部分。因此，要创建单独的行，请尝试添加

col-12

或简单地删除

row


玩家1
玩家2
玩家3
玩家4

您必须像这样对代码进行一些更改。复制并粘贴此代码，然后查看。也许这对你有帮助


玩家1
玩家2
玩家3
玩家4

你能截屏输出吗？嗨，你能检查一下控制台中是否有脚本错误吗？你只需将col-xs-3更改为col-sm-3，它就会被修复。Hi@Bucket只需删除每个

中的

行，它就会被修复。或者，您可以只按照pattern.OP要求启动4而不是启动3这项工作适用于所有启动版本。删除此add you desire Version检查此项使用bootstrap 4修改您的代码，因此您必须从代码中的每个div中删除类“row”以获得解决方案这是可行的，但当我这样做时，输入框大小占用了整个空间，我试图使它们更小，是否有其他解决方法使用此选项？我认为在Bootstrap 4中不推荐使用xs
，请将其替换为col-sm-3
，或者干脆用col-3
更新我的答案