标签的位置出现在顶部而不是左侧

Question

我正在使用 bootstrap 使用 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

您已将form-horizontal 类添加到<form>，但我认为您还需要添加网格列类来定义每个标签和输入的宽度。

例如，将col-sm-2类添加到<label>，然后将input和span包裹在里面

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

</div>

如果视口 col-sm-* 将导致标签和输入堆叠。如果您希望它们始终保持水平，请使用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

Answer 2

按照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 标记。以下是您提供的带有适当标签和闭包的完整代码：

		<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 col-sm-2">Product Name</label>
								<div class="col-sm-10">
									<input asp-for="ProductName" class="form-control" />
									<span asp-validation-for="ProductName" class="text-danger"></span>
								</div>
							</div>
							<div class="form-group">
								<label asp-for="LongDescription" class="control-label col-sm-2"></label>
								<div class="col-sm-10">
									<textarea id="editor1" name="editor1" rows="10" cols="80">This is my textarea to be replaced with CKEditor.</textarea>
								</div>
							</div>
							<div class="form-group ">
								<label asp-for="OldPrice" class="control-label col-sm-2"> 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>
							<div class="form-group">
								<label asp-for="NewPrice" class="control-label col-sm-2">Price</label>
								<div class="col-sm-10">
									<input asp-for="NewPrice" class="form-control" />
									<span asp-validation-for="NewPrice" class="text-danger"></span>
								</div>
							</div>
							<div class="form-group">
								<label asp-for="SKU" class="control-label col-sm-2">Sku (Product No)</label>
								<div class="col-sm-10">
									<input asp-for="SKU" class="form-control" />
									<span asp-validation-for="SKU" class="text-danger"></span>
								</div>
							</div>
						</form>
					</div>