位置，而不是离开

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