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

时间：2017-10-20 11:42:23

标签： css asp.net twitter-bootstrap

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

这给了我一个这样的布局但是我希望控件的标签在左边有相同的填充

enter image description here

这是我想要实现的任何人都没有怎么做。 enter image description here

2 个答案:

答案 0 :(得分：1)

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

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

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

</div>

如果视口是＆lt;

使用类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

答案 1 :(得分：-1)

根据Bootstrap's documentation对每个表单组使用form-inline类。您的代码中的一个示例是：

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

编辑：我错过了你想要等间距的部分。在那种情况下，Patrick O＆＃Grae的答案应该有效。但是，在关闭表单之前，您已关闭外部div标签。以下是使用正确的标记和闭包提供的完整代码：

＆＃13;
＆＃13; 
		<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题