Question

我是新手一般的新手，但试着理解它。我有一个登录表单，如下图所示。我设法改变输入框的宽度，但我无法将两个文本框移动到接近＆＃34;记住我＆＃34;复选框，

基本上我想把文本框的位置作为下面的图像（我在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>

谢谢！

Answer 1

您可以从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语法。您通常应该尽量避免使用它，但在这种情况下，它可以帮助我们覆盖bootstraps样式。

最后，您可以看到工作项目here。

bootstrap 4输入框的内联形式位置

1 个答案: