私のフォームはデフォルトでブートストラップモーダルcol-md-6の中にあるのはなぜですか？

Question

私はウェブサイトを構築しており、モーダルウィンドウ内に部分的なビューとしてフォームを埋め込もうとしました。私はモーダルの中でフォームを得ることに成功しましたが、それはモーダルボディの左半分にしか現れません。誰かがこれに対する修正を知っていますか？

私はcol-md-6をどこにも設定していないので、このように表示される理由はありません。私は正確に正しいと思われるいくつかの模範的な例をインターネットからコピーしようと試みましたが、私は同じ問題を抱えていました。

フォームがにロードされたモーダルウィンドウ：

<!-- Modal --> 
<div id="addLeverancierModal" class="modal fade" tabindex="-1" role="dialog"> 
<div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title">Leverancier toevoegen</h4> 
     </div> 
     <div class="modal-body"> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Annuleer</button> 
      <button type="button" class="btn btn-success">Opslaan</button> 
     </div> 
    </div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 

モーダルフォーム（部分図）：

<form role="form"> 
<div class="form-group"> 
    <label>Leveranciernummer</label> 
    <input type="email" class="form-control" id="leveranciernummerInput" placeholder="Leveranciernumer"> 
</div> 
<div class="form-group"> 
    <label>Naam</label> 
    <input class="form-control" id="leveranciernaamInput" placeholder="Naam"> 
</div> 
<div class="form-group"> 
    <label>Straatnaam</label> 
    <input class="form-control" id="straatnaamInput" placeholder="Straatnaam"> 
</div> 
<div class="form-group"> 
    <label>Huisnummer</label> 
    <input class="form-control" id="huisernummerInput" placeholder="Huisnummer"> 
</div> 
<div class="form-group"> 
    <label>Postcode</label> 
    <input class="form-control" id="postcodeInput" placeholder="Postcode"> 
</div> 
<div class="form-group"> 
    <label>Plaatsnaam</label> 
    <input class="form-control" id="plaatsnaamInput" placeholder="Plaatsnaam"> 
</div> 
<div class="form-group"> 
    <label>Land</label> 
    <input class="form-control" id="landInput" placeholder="Land"> 
</div> 
<div class="form-group"> 
    <label>VAT</label> 
    <input class="form-control" id="vatInput" placeholder="VAT"> 
</div> 
<div class="form-group"> 
    <label>Telefoon</label> 
    <input class="form-control" id="telefoonInput" placeholder="Telefoon"> 
</div> 
<div class="form-group"> 
    <label>Email</label> 
    <input class="form-control" id="emailInput" placeholder="Email"> 
</div> 
<div class="form-group"> 
    <label>Email extra</label> 
    <input class="form-control" id="emailExtraInput" placeholder="Email extra"> 
</div> 
</form> 

はJQueryモーダル内部フォームをロードします。

すべてのコンテンツは、（すべてのhtmlファイル）にロードされている

var GetLeverancierForm = function() { 
$.ajax({ 
    type: "GET", 
    url: baseURL + '/AddLeverancier', 
    success: function (data) { 
     $(".modal-body").html(data); 
    } 
}); 
} 

ベースコンテナ：モーダルの表示方法の

<div class="container body-content"> 
    @RenderBody() 
    </div> 

画像：

Answer 1

この

<form class="form-horizontal"> 
    <div class="form-group"> 
     <label class="control-label col-sm-2" for="email">Email:</label> 
     <div class="col-sm-10"> 
     <input type="email" class="form-control" id="email" placeholder="Enter email"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-sm-2" for="pwd">Password:</label> 
     <div class="col-sm-10">   
     <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
     </div> 
    </div> 
    </form> 

のようなフォームをデザイン

これは次のようになります。