內聯形式的輸入寬度 - Bootstrap 4

早上好，我正在嘗試使用Bootstrap 4設置不同寬度輸入的內聯表單。我嘗試了以下不同的選項：http://v4-alpha.getbootstrap.com/components/forms/。內聯形式的輸入寬度 - Bootstrap 4

這是據我去：

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-1"> 
      <label for="exampleInputName2" class="col-form-label">Name</label> 
     </div> 
     <div class="col-xs-2"> 
      <input type="text" class="form-control" placeholder=".col-xs-2"> 
     </div> 
     <div class="col-xs-3"> 
      <input type="text" class="form-control" placeholder=".col-xs-3"> 
     </div> 
     <div class="col-xs-4"> 
      <input type="text" class="form-control" placeholder=".col-xs-4"> 
     </div> 
    </div> 
</div>

但我沒有使用任何形式的類或標籤。

----------------編輯------------------------

要更具體一點，在這個例子中，你將如何指定標籤和輸入的寬度來自Bootstrap 4網站？

<form class="form-inline"> 
    <div class="form-group"> 
    <label for="exampleInputName2">Name</label> 
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> 
    </div> 
    <div class="form-group"> 
    <label for="exampleInputEmail2">Email</label> 
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]"> 
    </div> 
    <button type="submit" class="btn btn-primary">Send invitation</button> 
</form>

任何好的和簡單的例子將受到歡迎。

感謝

西爾

來源

2016-08-19 sylvain77

什麼是問題嗎？您的示例具有「輸入寬度不同的內聯表單」... http://codeply.com/go/yYFKb5XkVT – ZimSystem

@ZimSystem它可以有效地工作，但事實並非如此。例如，2個輸入col-xs-3和col-xs-4具有完全相同的寬度，所以我缺少一些東西。所以我只是使用form-inline標籤尋找最佳實踐建議。 – sylvain77

col-xs-3和col-xs-4對我來說顯示出不同的寬度.. col-xs-4更寬 – ZimSystem

這裏有一個簡單的例子。將它包裝在一個表單元素中，您可以添加不同的輸入。更好地保持col-xs-類一致，以便它們正確排列

確保您已將引導程序css和js添加到您的網站。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script> 
 
<div class="container"> 
 
    <form> 
 
    <div class="form-group row"> 
 
     <label for="name1" class="col-sm-2 col-form-label">Name</label> 
 
     <div class="col-sm-10"> 
 
     <input type="text" class="form-control" id="name1" placeholder=".col-sm-10"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label for="name2" class="col-sm-2 col-form-label">Other Name</label> 
 
     <div class="col-sm-10"> 
 
     <input type="text" class="form-control" id="name2" placeholder=".col-sm-10"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label for="name3" class="col-sm-2 col-form-label">Third Name</label> 
 
     <div class="col-sm-10"> 
 
     <input type="text" class="form-control" id="name3" placeholder=".col-sm-10"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <div class="offset-sm-2 col-sm-10"> 
 
     <button type="submit" class="btn btn-primary">Submit</button> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

來源

2016-08-20 19:44:57 Shano

感謝@Shano，但我正在尋找使用Bootstrap 4創建內聯表單，並且您給我舉一個例子使用Bootstrap 3的行形式... – sylvain77

對不起@ sylvain77我在最後一分鐘包括bootstrap 3！代碼是bootstrap 4.我已經編輯它現在使用bootstrap 4。 – Shano

看下面的例子，如果你想使用引導V4電網與form-inline

<form class="form-inline"> 
    <div class="form-group row"> 
    <div class="col-md-5"> 
     <p class="form-control-static">[email protected]</p> 
    </div> 
    <div class="col-md-5"> 
     <input type="password" class="form-control" id="inputPassword2" placeholder="Password"> 
    </div> 
    <div class="col-md-2"> 
     <button type="submit" class="btn btn-primary">Confirm identity</button> 
    </div> 
    </div> 
</form>

寬度沿檢查小提琴瞭解更多詳情：https://jsfiddle.net/dx0dzaqj/1/

來源

2016-08-22 03:42:59

內聯形式的輸入寬度 - Bootstrap 4

回答

相關問題