位置，而不是離開

Question

我使用引導使用adminlte主題，我試圖讓我的標籤留給我的文本框樣式我的管理員，但我使用以下

<div class="col-md-10"> 
     <div class="nav-tabs-custom"> 
      <ul class="nav nav-tabs"> 
       <li class="active"><a href="#activity" data-toggle="tab">Prodct Info</a></li> 
       <li><a href="#images" data-toggle="tab">Product Images</a></li> 
       <li><a href="#seo" data-toggle="tab">Seo</a></li> 
       <li><a href="#settings" data-toggle="tab">Settings</a></li> 
      </ul> 
      <div class="tab-content"> 
       <div class="active tab-pane" id="activity"> 
        <form asp-controller="Products" asp-action="Create" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal" role="form"> 

         <div asp-validation-summary="ModelOnly" class="text-danger"></div> 
         <div class="form-group"> 
          <label asp-for="ProductName" class="control-label">Product Name</label> 
          <input asp-for="ProductName" class="form-control" /> 
          <span asp-validation-for="ProductName" class="text-danger"></span> 
         </div> 
         <div class="form-group"> 
          <label asp-for="LongDescription" class="control-label"></label> 


          <textarea id="editor1" name="editor1" rows="10" cols="80"> 
             This is my textarea to be replaced with CKEditor. 
       </textarea> 

         </div> 
         <div class="form-group "> 
          <label asp-for="OldPrice" class="control-label"> Old Price</label> 
          <input asp-for="OldPrice" class="form-control" /> 
          <span asp-validation-for="OldPrice" class="text-danger"></span> 
         </div> 
         <div class="form-group"> 
          <label asp-for="NewPrice" class="control-label">Price</label> 
          <input asp-for="NewPrice" class="form-control" /> 
          <span asp-validation-for="NewPrice" class="text-danger"></span> 
         </div> 
         <div class="form-group"> 
          <label asp-for="SKU" class="control-label">Sku (Product No)</label> 
          <input asp-for="SKU" class="form-control" /> 
          <span asp-validation-for="SKU" class="text-danger"></span> 
         </div> 

       </div> 

其中給出我的佈局本身，而是我想控件的標籤是向左平等填充

這就是我想實現是否有人沒怎麼。

Answer 1

按照Bootstrap's documentation對每個表單組使用內聯類。從代碼中的一個例子是：

<div class="form-group form-inline"> 
 
    <label asp-for="OldPrice" class="control-label"> Old Price</label> 
 
    <input asp-for="OldPrice" class="form-control" /> 
 
    <span asp-validation-for="OldPrice" class="text-danger"></span> 
 
</div>

編輯：我錯過了，你想間距相等的部分。在這種情況下，帕特里克奧格雷迪的答案應該有效。但是，在關閉表單之前，您已經關閉了外部div標籤。這裏是你用正確的標籤和瓶蓋給了完整代碼：

\t \t <div class="col-md-10"> 
 
\t \t \t <div class="nav-tabs-custom"> 
 
\t \t \t \t <ul class="nav nav-tabs"> 
 
\t \t \t \t \t <li class="active"><a href="#activity" data-toggle="tab">Prodct Info</a></li> 
 
\t \t \t \t \t <li><a href="#images" data-toggle="tab">Product Images</a></li> 
 
\t \t \t \t \t <li><a href="#seo" data-toggle="tab">Seo</a></li> 
 
\t \t \t \t \t <li><a href="#settings" data-toggle="tab">Settings</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t \t <div class="tab-content"> 
 
\t \t \t \t \t <div class="active tab-pane" id="activity"> 
 
\t \t \t \t \t \t <form asp-controller="Products" asp-action="Create" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal" role="form"> 
 
\t \t \t \t \t \t \t <div asp-validation-summary="ModelOnly" class="text-danger"></div> 
 
\t \t \t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t \t \t <label asp-for="ProductName" class="control-label col-sm-2">Product Name</label> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-10"> 
 
\t \t \t \t \t \t \t \t \t <input asp-for="ProductName" class="form-control" /> 
 
\t \t \t \t \t \t \t \t \t <span asp-validation-for="ProductName" class="text-danger"></span> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t \t \t <label asp-for="LongDescription" class="control-label col-sm-2"></label> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-10"> 
 
\t \t \t \t \t \t \t \t \t <textarea id="editor1" name="editor1" rows="10" cols="80">This is my textarea to be replaced with CKEditor.</textarea> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="form-group "> 
 
\t \t \t \t \t \t \t \t <label asp-for="OldPrice" class="control-label col-sm-2"> Old Price</label> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-10"> 
 
\t \t \t \t \t \t \t \t \t <input asp-for="OldPrice" class="form-control" /> 
 
\t \t \t \t \t \t \t \t \t <span asp-validation-for="OldPrice" class="text-danger"></span> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t \t \t <label asp-for="NewPrice" class="control-label col-sm-2">Price</label> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-10"> 
 
\t \t \t \t \t \t \t \t \t <input asp-for="NewPrice" class="form-control" /> 
 
\t \t \t \t \t \t \t \t \t <span asp-validation-for="NewPrice" class="text-danger"></span> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t \t \t <label asp-for="SKU" class="control-label col-sm-2">Sku (Product No)</label> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-10"> 
 
\t \t \t \t \t \t \t \t \t <input asp-for="SKU" class="form-control" /> 
 
\t \t \t \t \t \t \t \t \t <span asp-validation-for="SKU" class="text-danger"></span> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </form> 
 
\t \t \t \t \t </div>

Answer 2

你已經得到了form-horizontal類添加到<form>，但我認爲你還需要網格列類添加到定義每個標籤和輸入的寬度。

例如，類col-sm-2添加到<label>，然後包裹input和span內部

<div class="col-sm-10"> 

</div> 

使用類col-sm-*會導致標籤，並輸入到疊加如果視口是< 768px。如果您希望它們始終處於水平狀態，請使用col-xs-*。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<!--Stacked if width < 768px --> 
 
<form class="form-horizontal"> 
 
    <div class="form-group"> 
 
    <label asp-for="OldPrice" class="col-sm-2 control-label">Old Price</label> 
 
    <div class="col-sm-10"> 
 
     <input asp-for="OldPrice" class="form-control" /> 
 
     <span asp-validation-for="OldPrice" class="text-danger"></span> 
 
    </div> 
 
    </div> 
 
</form> 
 

 
<!-- Never stacked --> 
 
<form class="form-horizontal"> 
 
    <div class="form-group"> 
 
    <label asp-for="OldPrice" class="col-xs-2 control-label">Old Price</label> 
 
    <div class="col-xs-10"> 
 
     <input asp-for="OldPrice" class="form-control" /> 
 
     <span asp-validation-for="OldPrice" class="text-danger"></span> 
 
    </div> 
 
    </div> 
 
</form>

來源：https://getbootstrap.com/docs/3.3/css/#forms-horizontal