总的来说，我是 Bootstrap 的新手，但尝试理解它。我有一个登录表格，如下图所示。我设法更改输入框的宽度，但无法将两个文本框移动到“记住我”复选框附近，
基本上我想将文本框的位置设置为如下图所示(我在 Windows Paint 中进行了显示!)。 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语法。通常您应该尽量避免使用它，但在这种情况下，它可以帮助我们覆盖 Bootstrap 样式。
最后可以看到工作项目here .
关于forms - bootstrap 4内联表单输入框的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46228596/