我一般来说是新手，但是请尝试理解它。我有一个登录表格，如下图所示。我设法更改了输入框的宽度，但无法将两个文本框都移到“记住我”复选框附近，
enter image description here
基本上，我想将文本框的位置设置为下图（我在Windows画图中进行了显示！）。
enter image description here
这是我使用的正文代码：
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="/">Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto ">
<li class="nav-item">
<a class="nav-link" href="test1.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="test2.html">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto ">
<li class="nav-item">
<form class="form-inline">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control-sm col-2 mb-0 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Username">
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group mb-2 mr-sm-0 mb-sm-0">
<input type="password" class="form-control-sm col-6 mr-sm-2" id="inlineFormInputGroup" placeholder="Password">
</div>
<div class="form-check mb-2 mr-sm-2 mb-sm-0">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</li>
</ul>
</div>
</nav>
</body>
谢谢！
最佳答案
您可以从Bootstrap 4的documentation中获取一些演示示例，并将其与一些您自己的CSS结合使用以获得所需的结果。
这直接来自他们的文档，并进行了一些修改以适合您的用例：
<form class="form-inline">
<label class="sr-only" for="inlineFormInputUsername">Username</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInputUsername" placeholder="Username">
<label class="sr-only" for="inlineFormInputGroupPassword">Password</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<input type="text" class="form-control" id="inlineFormInputGroupPassword" placeholder="Password">
</div>
<div class="form-check mb-2 mr-sm-2 mb-sm-0">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
然后，使用简单的CSS规则，可以指定输入元素的宽度：
.form-control {
max-width: 100px !important;
}
注意
!important语法。通常，您应该避免使用它，但是在这种情况下，它可以帮助我们覆盖引导程序样式。最后，您可以看到正在运行的项目here。
关于forms - bootstrap 4输入框的内联窗体位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46228596/