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輸入框的內聯表單位置

回答

相關問題