局部视图渲染不正确（ASP.NET MVC）

Question

I have modal dialog opening by click

Modal body is Partial View

Here is code of partial view

<div style="height: 400px;overflow-y: scroll">
    <div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
    <input type="text" class="form-control" id="Name" , placeholder="Enter First and Last Name " />
    </div>
    <div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
   <input type="text" class="form-control" id="sex" , placeholder="Sex" />
</div>

I call modal in main View like this

<div class="modal fade" id="addPatient" style="z-index: 5" role="dialog" data-backdrop="false">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-body">
            <p style="font-size: 20px;">Appointment successfully created </p>
        </div>
        <div class="modal-footer">
            @Html.Partial("~/Views/PatientDatabase/AddingPatient.cshtml")
        </div>
    </div>

</div>

But my inputs displaying in one row.

Like this

Screen

Where problem can be?

As I understood it must display not in one row.

Answer 1

Hope there is float : left in form-group class. So add clear:both in those div's style attribute.

<div style="height: 400px;overflow-y: scroll">
    <div class="form-group" style="clear:both;text-align:center;padding-bottom: 20px; padding-top: 10px;">
    <input type="text" class="form-control" id="Name" , placeholder="Enter First and Last Name " />
    </div>
    <div class="form-group" style="clear:both;text-align:center;padding-bottom: 20px; padding-top: 10px;">
   <input type="text" class="form-control" id="sex" , placeholder="Sex" />
   </div>
</div>