引導4水平表單 - 文本標籤輸入旁邊的輸入

Question

我想在與Bootstrap 4水平表單中的文本框相同的行中獲取標籤。似乎沒有工作。文本框始終顯示在下一行。任何幫助是極大的讚賞。

<div class="form-group form-group-sm col-sm-6"> 
    <label for="first_name" class="col-form-label">First Name</label> 
    <div> 
    <input type="text" class="form-control" id="first_name" name="first_name"> 
    </div> 
</div> 

小提琴：https://jsfiddle.net/gunnersfan/mrc4tdu1/

Answer 1

的col-*必須在.row。使用的標籤和輸入包裝格列類...

http://www.codeply.com/go/TUs7hGHnXP

<form class="form-horizontal"> 
    <div class="container"> 
     <div class="row"> 
      <div class="form-group form-group-sm col-sm-6"> 
       <div class="row"> 
        <label for="first_name" class="col-sm-3 col-form-label">First Name</label> 
        <div class="col-sm-9"> 
         <input type="text" class="form-control" id="first_name" name="first_name"> 
        </div> 
       </div> 
      </div> 
      <div class="form-group form-group-sm col-sm-6"> 
       <div class="row"> 
        <label for="last_name" class="col-sm-3 col-form-label">Last Name</label> 
        <div class="col-sm-9"> 
         <input type="text" class="form-control" id="last_name" name="last_name"> 
        </div> 
       </div> 
      </div> 
      <div class="form-group form-group-sm col-sm-6"> 
       <div class="row"> 
        <label for="Street" class="col-sm-3 col-form-label">Street</label> 
        <div class="col-sm-9"> 
         <input type="text" class="form-control" id="Street" name="Street"> 
        </div> 
       </div> 
      </div> 
      <div class="form-group form-group-sm col-sm-6"> 
       <div class="row"> 
        <label for="City" class="col-sm-3 col-form-label">City</label> 
        <div class="col-sm-9"> 
         <input type="text" class="form-control" id="City" name="City"> 
        </div> 
       </div> 
      </div> 

     </div> 

    </div> 
</form> 

http://www.codeply.com/go/TUs7hGHnXP