引導不當表格格式化

Question

Salaamun Alekum

我改變引導Form類從form-horizontal要form-inline和所有格式不安我怎樣才能得到正確的內聯格式化

以前

直列後

這是示例代碼與第一個表單域

<div class="form-horizontal"> 

    <hr /> 
    @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
    <div class="form-group"> 
     <label class="control-label col-md-2" for="Med_Name">Medicine Name</label> 
     <div class="col-md-10"> 
      @Html.EditorFor(model => model.Med_Name, new { htmlAttributes = new { @class = "form-control" } }) 
      @Html.ValidationMessageFor(model => model.Med_Name, "", new { @class = "text-danger" }) 
     </div> 
    </div> 
    @* Rest Of The HTML Code Is Not Shown *@ 

謝謝

Answer 1

當您設置風格inline你還需要將其包裝在各自的UI模式說..結束語前3 textboxes在col-md-4然後包裝所有這3個textboxes在col-md-12父爲他們..甚至你可以嘗試把它包在row元素，每次3 textboxes或者按您的要求。

例：

<div class="col-md-12"> <!--Even row instead of col-md-12--> 
    <div class="form-group col-md-4"> <!--col-md-4 for other elements too--> 
     <label class="control-label col-md-2" for="Med_Name">Trade Price</label> 
     <div class="col-md-10"> 
      @Html.EditorFor(model => model.Med_Name, new { htmlAttributes = new { @class = "form-control" } }) 
      @Html.ValidationMessageFor(model => model.Med_Name, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

    <!--Same goes for other 2 elements--> 
</div> 
<div class="col-md-12"> <!--Even row instead of col-md-12--> 
    <div class="form-group col-md-4"> 
     <label class="control-label col-md-2" for="Med_Name">Medicine Name</label> 
     <div class="col-md-10"> 
      @Html.EditorFor(model => model.Med_Name, new { htmlAttributes = new { @class = "form-control" } }) 
      @Html.ValidationMessageFor(model => model.Med_Name, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

    <!--Same goes for other 2 elements--> 
</div> 

Answer 2

Salaamun Alekum 我用col-md-*隨着form-inline類作爲@GuruprasadRao提到在評論http://j.mp/3112071208

謝謝@GuruprasadRao

現在格式化是更漂亮

謝謝