اصلاح کد ویو برای ریسپانسیو شدن...

[resident]

سلام.

من برای Responsive کردن برنامم از بوت استرپ استفاده کردم.


وقتی فرمم رو کوچک می کنم، فرم به شکل زیر بهم میریزه

117159


اینم کد view ام است:


<div class="col-md-12">
<h3 class="sub-header">@ControllerNameByCulture</h3>
<div class="panel panel-midnightblue">
@Html.Partial("_PanelHeader")
<div class="panel-body">
@using (Html.BeginForm(@ActionName, @ControllerName, FormMethod.Post, new { @class = "form-horizontal", id = "AddEditForm" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<div class="form-group">
<div class="col-md-1">
@Html.LabelFor(model => model.Person_Sexular, new { @class = "control-label" })
</div>
<div class="col-md-3">
@Html.EnumDropDownListFor(model => model.Person_Sexular)
</div>
<div class="col-md-2"></div>

<div class="col-md-1">
@Html.LabelFor(model => model.Person_PrefixID, new { @class = "control-label" })
</div>
<div class="col-md-3">
@Html.DropDownListFor(model => model.Person_PrefixID, (SelectList)(ViewData["Prefixlist"]), "انتخاب کنید", new { @class = "form-control chosen-select" })
</div>
<div class="col-md-2">
@Html.ValidationMessageFor(model => model.Person_PrefixID)
</div>
</div>

<div class="form-group">

<div class="col-md-1">
@Html.LabelFor(model => model.Person_FirstName, new { @class = "control-label" })
</div>
<div class="col-md-3">
@Html.TextBoxFor(model => model.Person_FirstName, new { @class = "form-control" })
</div>
<div class="col-md-2">
@Html.ValidationMessageFor(model => model.Person_FirstName)
</div>

<div class="col-md-1">
@Html.LabelFor(model => model.Person_LastName, new { @class = "control-label" })
</div>
<div class="col-md-3">
@Html.TextBoxFor(model => model.Person_LastName, new { @class = "form-control" })
</div>
<div class="col-md-2">
@Html.ValidationMessageFor(model => model.Person_LastName)
</div>
</div>

<div class="form-group">
<div class="col-md-1">
@Html.LabelFor(model => model.PersonCompany_ActivityField_ActivityFieldIDs , new { @class = "control-label" })
</div>

<div class="col-md-3">

@Html.ListBoxFor(model => model.PersonCompany_ActivityField_ActivityFieldIDs , (MultiSelectList)(ViewData["ActivityFieldlist"]), new { @class = "form-control chosen-select" })
</div>

<div class="col-md-2">
@Html.ValidationMessageFor(model => model.PersonCompany_ActivityField_ActivityFieldIDs )
</div>

<div class="col-md-1">
@Html.LabelFor(model => model.PersonCompany_Ranking_PersonCompany_RankingI Ds, new { @class = "control-label" })
</div>
<div class="col-md-3">
@Html.ListBoxFor(model => model.PersonCompany_Ranking_PersonCompany_RankingI Ds, (MultiSelectList)(ViewData["Rankinglist"]), new { @class = "form-control chosen-select" })

</div>

<div class="col-md-2">
@Html.ValidationMessageFor(model => model.PersonCompany_Ranking_PersonCompany_RankingI Ds)
</div>
</div>


@Html.Partial("_PanelFooter");
}
</div>
</div>
</div>




کجای کدمو باید درست کنم تا در هر سایزی بهم نریزه و کنترل ها مرتب قرار بگیرن؟