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

我是一般的新手，但试着理解它。我有一个登录表单，你可以看到下面的图片。我设法改变输入框的宽度，但我不能管理移动两个文本框接近“记住我”复选框，bootstrap 4输入框的内联表单位置

基本上我想使文本框作为的地方下面的图像（我做了在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>

谢谢！

来源

2017-09-14 Sam

您可以从Bootstrap 4的documentation中获取一些演示示例，并将其与您自己的一些CSS一起使用，以获得您想要的结果。

这直接来自他们的文档，进行一些修改，以适应你的使用情况：用一个简单的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>

然后，你可以指定你的输入元素的宽度：

请注意!important语法。你通常应该尽量避免使用它，但在这种情况下，它可以帮助我们重写bootstraps样式。

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

来源

2017-09-14 22:51:51 cwanjt

真的很感谢他现在正在工作！ – Sam

没问题。很高兴帮助。 – cwanjt

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

回答

相关问题