angle data-ng-showディレクティブを使用したエラーの表示

Question

data-ng-showディレクティブを使用してエラーを表示しています。それは正常に動作しています。唯一の問題は、メッセージが次の行に表示されることです。要件は、同じ行に表示することです。

私が書かれているHTMLコードを以下に示す：

<form name="newTopicForm" novalidate class="form-horizontal" data-ng-submit="save()"> 
    <fieldset> 
     <div class="col-md-9"> 
      <label for="title" class="control-label">Title</label> 
      <input name="title" type="text" class="form-control" data-ng-model="newTopic.title" required data-ng-minlength="5" /> 
      <span class="error" data-ng-show="newTopicForm.title.$error.required">*</span> 
      <span class="error" data-ng-show="newTopicForm.title.$error.minlength"> Minimum 5 Characters</span> 
     </div> 
</fieldset> 
</form> 

私はこのようなレイアウトページ（_Layout.cshtml）を使用しています：

<div class="main"> 
     <div class="container"> 
      <div class="row"> 
       @RenderBody() 
      </div> 
     </div> 
    </div> 

してください私が逃していることを教えてください、ありがとう。

Answer 1

1として、あなたはまた、Twitterのブートストラップを使用しています。 twitterのブートストラップの 'form-control'クラスでは、要素は100％の幅をとります。次のように同じ行でそれを行うには、別々の列を作成する必要があります -

<form name="newTopicForm" novalidate class="form-horizontal" data-ng-submit="save()"> 
    <fieldset> 
     <div class="col-md-6"> 
      <label for="title" class="control-label">Title</label> 
      <input name="title" type="text" class="form-control" data-ng-model="newTopic.title" required data-ng-minlength="5" />    
     </div> 
     <div class="col-md-3"> 
       <span class="error" data-ng-show="newTopicForm.title.$error.required">*</span> 
      <span class="error" data-ng-show="newTopicForm.title.$error.minlength"> Minimum 5 Characters</span> 
     </div> 
</fieldset> 
</form> 

Answer 2

あなたはブートストラップの水平フォームを使用しているとしますか？これを試してください：あなたのコードが示唆

<form name="newTopicForm" novalidate class="form-horizontal" data-ng-submit="save()"> 
    <div class="form-group"> 
     <label name="title" for="inputEmail3" class="col-sm-2 control-label">Email</label> 
     <div class="col-sm-6"> 
      <input type="email" data-ng-model="newTopic.title" required data-ng-minlength="5" class="form-control" id="inputEmail3" placeholder="Email"> 
     </div> 
     <div class="col-sm-4"> 
      <span class="error" data-ng-show="newTopicForm.title.$error.required">*</span> 
      <span class="error" data-ng-show="newTopicForm.title.$error.minlength"> Minimum 5 Characters</span> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Submit</button> </div> 
    </div> 
</form> 

あなたがドキュメントにspecifed HTML構文に従わなければならない、http://getbootstrap.com/css/#forms