Bootstrap - ASP.NET Core

我想問一下如何在整個模態窗體中擴展寬度。Bootstrap - ASP.NET Core

這裏是我的代碼：

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

而且這樣表示：

input text problem

有沒有辦法，我可以解決這個問題的任何方式。

我認爲它與bootstrap庫有關，但我不知道它在哪裏。

來源

2017-03-31 NightShade555

試試這個：

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

工作例如：https://jsfiddle.net/KyleMit/0fscmf3L/

學分：凱爾Mitofsky

來源

2017-03-31 13:41:21

這就是爲什麼我把他的jsfiddle鏈接 –

這是一件好事，包括信貸，否則你可能會得到downvoted，所以補充它。 – neophyte

@neophyte，謝謝..請記住:) –

你必須使用引導網格系統。

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

來源

2017-03-31 13:43:03 neophyte

Bootstrap - ASP.NET Core

回答

相關問題