bootstrap 4 输入框的内联表单位置答案

【问题标题】：bootstrap 4 inline form position of the input boxesbootstrap 4 输入框的内联表单位置
【发布时间】：2018-02-23 23:57:27
【问题描述】：

一般来说，我是引导程序的新手，但尝试理解它。我有一个登录表格，如下图所示。我设法更改了输入框的宽度，但我无法将两个文本框都移到“记住我”复选框附近，

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>

谢谢！

【问题讨论】：

标签： forms input position inline bootstrap-4

【解决方案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 语法。您通常应该尽量避免使用它，但在这种情况下，它可以帮助我们覆盖引导程序样式。

终于可以看到工作项目here了。

【讨论】：

没问题。很高兴它有帮助。