フォームを横に並べる

Question

私はフロントエンドの開発に慣れていません。別の行に表示するのではなく、次の形式でフォームを並べようとしています。ここに私のコードは次のとおりです。

 $templateCache.put('myProfile.html', 
      '<div ng-cloak>'+ 
      '<div class="modal-header">'+ 
       '<h3 class="modal-title">My Profile</h3>'+ 
      '</div>'+ 
      '<div class="modal-body">'+ 
      '<div class="form-group">'+ 
       '<label>Title</label>'+ 
       '<input type="text" id="first_name" name="first_name" class="form-control" required/>'+ 
      '</div>'+ 
      '<div class="form-group">'+ 
       '<label>First Name</label>'+ 
       '<input type="text" id="first_name" name="first_name" class="form-control" required/>'+ 
      '</div>'+ 
      '<div class="form-group">'+ 
       '<label>Last Name</label>'+ 
       '<input type="text" id="last_name" name="last_anme" class="form-control" required/>'+ 
      '</div>'+ 
      '<div class="form-group">'+ 
       '<label>Test</label>'+ 
       '<input type="text" id="address" name="address" class="form-control" required/>'+ 
      '</div>'+ 
      '<div class="form-group">'+ 
      '<label>Other</label>'+ 
      '<input type="text" id="other" name="other" class="form-control" required/>'+ 
     '</div>'+ 
      '<div class="form-group">'+ 
       '<label>Date Format</label>'+ 
       '<select class="form-control-filter" ng-init="tempDateFormat = dateFormat"'+ 
        ' ng-model=\"tempDateFormat\" style="width:100%;">'+ 
        '<option value="DD/MM/YYYY">DD/MM/YYYY</option>'+ 
        '<option value="MM/DD/YYYY">MM/DD/YYYY</option>'+ 
        '<option value="DD-MM-YYYY">DD-MM-YYYY</option>'+ 
        '<option value="MM-DD-YYYY">MM-DD-YYYY</option>'+ 
       '</select>'+ 
      '</div>'+ 
      '<div class="modal-footer" style="padding:5px;">'+ 
       '<button class="btn btn-primary" type="button" style="height:30px; padding:4px 12px;" '+ 
       'ng-click="$close(tempDateFormat)">Save</button>'+ 
       '<button class="btn btn-primary" type="button" style="height:30px; padding:4px 12px;" '+ 
       'ng-click="$close(tempDateFormat)">Cancel</button>'+ 
      '</div>'+ 
      '</div>' 
    ); 

次のような出力ショーは：

しかし、私は、このウィンドウが展開されることを希望し、フォームfirst nameとlast nameが並べて表示されるはずです。私はこのサイトでいくつかの調査をしましたが、私の場合はうまくいかないようです。

ありがとうございます。

Answer 1

同じフォームグループに姓と名字を入れ、form-inlineのクラスを付けます。あなたがそれらをモバイル幅で横並びになりたい場合は

<div class="form-group form-inline"> 
    <label>First Name</label> 
    <input type="text" id="first_name" name="first_name" class="form-control" required/> 
    <label>Last Name</label> 
    <input type="text" id="last_name" name="last_name" class="form-control" required/> 
</div> 

あなただけの追加、いくつかのCSSを上書きする必要があります：これと同様

.form-inline .form-control{ 
    display: inline-block; 
    width: auto; 
    vertical-align: middle; 
} 

あなたはそれらを作るためにいくつかのカスタムCSSを行う必要があり私は彼らが小さな画面でちょっとばかげたように見えると思うので、モバイルの幅でこれを行うといいでしょう。