Bootstrap - ASP.NET Core

Question

Ich würde gerne fragen, wie ich die Breite über die modale Form strecken kann.

Hier ist mein Code:

<form asp-controller="Employee" asp-action="Create" method="post" class="form-inline" role="form"> 
<div id="myModal2" class="modal fade" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Create New Employee</h4> 
      </div> 

      <div class="modal-body"> 
       <div class="form-group"> 
        <input type="text" class="form-control"/> 
       </div> 
      </div> 

      <div class="modal-footer"> 
       <input type="hidden" id="Id"> 
       <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Create</button> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

und es zeigt, wie folgt aus:

input text problem

Gibt es eine Möglichkeit, dass ich dieses Problem beheben könnte.

Ich denke, es hat etwas mit der Bootstrap-Bibliothek zu tun, aber ich weiß nicht, wo es sich befindet.

Answer 1

starten:

<form asp-controller="Employee" asp-action="Create" method="post" class="form-inline" role="form"> 
<div id="myModal2" class="modal fade" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Create New Employee</h4> 
      </div> 

      <div class="modal-body"> 
       <div class="form-group"> 
        <div class="col-sm-10"> 
        <input type="text" class="form-control"/> 
        </div> 
       </div> 
      </div> 

      <div class="modal-footer"> 
       <input type="hidden" id="Id"> 
       <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Create</button> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

Arbeitsbeispiel: https://jsfiddle.net/KyleMit/0fscmf3L/

Credits: Kyle Mitofsky

Answer 2

Sie haben Bootstrap-Grid-System zu verwenden.

#inpt { 
 
width: 100%; 
 
} 
 
.modal-body { 
 
height: 200px;}

<form asp-controller="Employee" asp-action="Create" method="post" class="form-inline" role="form"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<a href="" data-toggle="modal" data-target="#myModal2">button</a> 
 
<div id="myModal2" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog modal-lg"> 
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
       <h4 class="modal-title">Create New Employee</h4> 
 
      </div> 
 

 
      <div class="modal-body"> 
 
       <div class="form-group col-xs-12"> 
 
        <input id="inpt" type="text" class="form-control"/> 
 
       </div> 
 
      </div> 
 

 
      <div class="modal-footer"> 
 
       <input type="hidden" id="Id"> 
 
       <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Create</button> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>