为什么默认情况下我的表单位于我的引导模式col-md-6中？

Question

I'm building a website and tried to embed a form as a partial view inside a modal window. I succeeded in getting the form inside the modal, but it only appears on the left half of the modal body. Does anyone know a fix for this?

I never set the col-md-6 anywhere so there i no reason for it to appear this way. I even tried to exactly copy some modal examples from the internet that appeared to be correct, but i had the same problem.

Modal window that the form is loaded in :

<!-- 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 -->

Modal form(partial view) :

<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 to load form inside modal:

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

Base container all content is loaded in(all html files):

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

Picture of how the modal appears:

Answer 1

Design your form like this

<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>

It would look like this :