Satır içi formdaki girdilerin genişliği - Bootstrap 4

Question

Günaydın, Bootstrap 4 kullanarak farklı genişliklerdeki girişlerle bir satır içi biçim oluşturmaya çalışıyorum. Buradaki farklı seçenekleri denedim: http://v4-alpha.getbootstrap.com/components/forms/.

<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> 

Ama herhangi bir biçimde sınıfları veya etiket kullanmıyorum:

Bu Gittim kadar uzaktır.

---------------- DÜZENLEME ------------------------

için Daha spesifik olmak gerekirse, bu örnekte Bootstrap 4 web sitesinden gelen etiketlerin ve girdilerin genişliklerini nasıl belirlersiniz?

<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="jane.doe@example.com"> 
    </div> 
    <button type="submit" class="btn btn-primary">Send invitation</button> 
</form> 

Herhangi bir iyi ve basit örnek memnuniyetle karşılanacaktır.

Teşekkür

Sylvain

Answer 1

Burada basit bir örnek. Bir form elemanına sarın ve farklı girişler ekleyebilirsiniz. Col-xs- sınıflarını düzgün bir şekilde hizaya getirecek şekilde daha iyi hizalanmalıdır.

Bootstrap css ve js'yi sitenize eklediğinizden emin olun.

<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>

Answer 2

Eğer önyükleme v4 ızgara kullanmak istiyorsanız, aşağıdaki örneğe bakın Daha fazla ayrıntı için keman edin form-inline

<form class="form-inline"> 
    <div class="form-group row"> 
    <div class="col-md-5"> 
     <p class="form-control-static">email@example.com</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> 

birlikte genişliklerini: https://jsfiddle.net/dx0dzaqj/1/