인라인 형식의 입력 너비 - 부트 스트랩 4

Question

안녕하십니까, 부트 스트랩 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> 

하지만 어떤 형태의 클래스 또는 태그를 사용하고 있지 않다 :

이것은 내가가는 때까지입니다.

----------------

받는 사람 더 구체적으로,이 예제에서 부트 스트랩 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/