Ширина входов в встроенной форме - Bootstrap 4

Question

Доброе утро, Я пытаюсь настроить встроенную форму с входами различной ширины с помощью Bootstrap 4. Я пробовал различные варианты, доступные здесь: 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> 

Но я не использую любые классы форм или тегов.

---------------- EDIT ------------------------

Для более конкретно, как бы вы указали ширину меток и входов в этом примере, исходящих с сайта 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="jane.doe@example.com"> 
    </div> 
    <button type="submit" class="btn btn-primary">Send invitation</button> 
</form> 

Любой хороший и простой пример приветствуется.

Благодаря

Сильвен

Answer 1

Вот простой пример. Оберните его в элемент формы, и вы можете добавить разные входы. Лучше держать классы 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>

Answer 2

Смотрите пример ниже, если вы хотите использовать загрузочный v4 сетки шириной наряду с 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> 

Проверьте скрипку для более подробной информации: https://jsfiddle.net/dx0dzaqj/1/