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

回答

相关问题