我遇到了对齐2个标签的问题,这里是现在图像的屏幕截图,请看数量和U.O.M标签
你可以看到数量和U.O.M远离购买列,我需要让这两个标签更接近所以它看起来像这样
如您所见,我需要数量和U.O.M标签更接近照片。我尝试使用右对齐的文本样式,但是没有用。
如何将两个标签更多地移到右边?
这是完整的代码
<body>
<div style="width:830px; margin-left:50px;">
<div class="form-horizontal">
<ul class="nav nav-tabs">
<li class="active"><a href="#MaterialData" data-toggle="tab">Material Data</a></li>
<li><a href="#MaterialColorAssignment" data-toggle="tab">Material Color Assignment</a></li>
<li><a href="#MaterialVendorAssignment" data-toggle="tab">Material Vendor Assignment</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="MaterialData">
<div class="panel panel-primary">
<div class="panel panel-heading"><strong>Add/Edit Material</strong></div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<input id="Category" class="form-control max-size" name="Category" required validationMessage="Select Category" />
<span class="k-invalid-msg" data-for="Category"></span>
</div>
<div class="col-md-4">
<input id="Type" class="form-control max-size" name="type" required validationMessage="Select type." />
<span class="k-invalid-msg" data-for="type"></span>
</div>
<div class="col-md-4" id="myDropdown">
<select class="form-control" name="subtype" id="SubType"></select>
</div>
</div>
</div>
</div>
<div class="panel panel-heading"><strong>Material Information</strong></div>
<div class="panel-body">
<div class="row">
<div class="form-group">
<label for="txtWidth" class="control-label col-md-1 col-md-offset-1" id="lblWidth"><b>Width</b></label>
<div class="col-md-2">
<input id="txtWidth" type="text" class="form-control" name="width" required validationMessage="Please add width." />
@*<span class="k-invalid-msg" data-for="width"></span>*@
</div>
<label for="txtLength" class="control-label col-md-1" id="lblLength"><b>Length</b></label>
<div class="col-md-2">
<input id="txtLength" type="text" class="form-control" name="length" required validationMessage="Please add length." />
@*<span class="k-invalid-msg" data-for="length"></span>*@
</div>
<label for="txtSize" class="control-label col-md-1" id="lblSize"><b>Size</b></label>
<div class="col-md-2">
<input id="txtSize" type="text" class="form-control" name="size" required validationMessage="Please add size." />
@*<span class="k-invalid-msg" data-for="size"></span>*@
</div>
</div>
</div>
</div>
<div class="panel panel-heading"><strong>Pricing and Labor Cost</strong></div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="row">
<label for="txtRemodel" class="control-label col-md-offset-5" id="lblDetail"><b>Sell Price</b></label>
<label for="txtRemodel2" class="control-label col-md-offset-2" id="lblDetail"><b>Labor Cost</b></label>
</div><!-- end row -->
<br />
<div class="row">
<label for="txtRemodel12" class="control-label col-md-2" id="lblRemodel">Remodel</label>
<div class="col-md-4 col-md-offset-2">
<input id="txtRemodel" type="text" class="form-control" name="remodel" required validationMessage="Please add sell prize." />
<span class="k-invalid-msg" data-for="remodel"></span>
</div>
<div class="col-md-4">
<input id="txtRemodel2" type="text" class="form-control" name="remodel2" required validationMessage="Please add labor cost." />
<span class="k-invalid-msg" data-for="remodel2"></span>
</div>
</div> <!-- end row -->
</div>
<div class="col-md-6">
<div class="row">
<label for="txtPurchaseQuantity" class="control-label col-md-offset-5" id="lblDetail"><b>Purchase</b></label>
<label for="txtSellQuantity" class="control-label col-md-offset-2" id="lblDetail"><b>Sell</b></label>
</div><!-- end row -->
<br />
<div class="row">
<label for="txtQuantity" class="control-label col-md-2" id="lblQuantity">Quantity</label>
<div class="col-md-4 col-md-offset-2">
<input id="txtPurchaseQuantity" type="text" class="form-control" name="purchasequantity" required validationMessage="Please add purchase qty." />
<span class="k-invalid-msg" data-for="purchasequantity"></span>
</div>
<div class="col-md-4">
<input id="txtSellQuantity" type="text" class="form-control" name="sellquantity" required validationMessage="Please add sell qty." />
<span class="k-invalid-msg" data-for="sellquantity"></span>
</div>
</div> <!-- end row -->
<div class="row row-splitter">
<label for="txtUOM" class="control-label col-md-2" id="lblUOM">U.O.M</label>
<div class="col-md-1 col-md-offset-2">
<select class="form-control" name="buyuom" id="ddBuyUOM" style="width:100px;" required validationMessage="Select purchase U.O.M."></select>
<span class="k-invalid-msg" data-for="buyuom"></span>
</div>
<div class="col-md-1 col-md-offset-3">
<select class="form-control" name="selluom" id="ddSellUOM" style="width:100px;" required validationMessage="Select sell U.O.M."></select>
<span class="k-invalid-msg" data-for="selluom"></span>
</div>
</div> <!-- end row -->
</div>
</div>
</div>
</div>
</div><!--End Material Data-->
</div><!--End tab content-->
</div>
</div>
</body>
答案 0 :(得分:0)
尝试下面的代码段
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div style="width:830px; margin-left:50px;">
<div class="form-horizontal">
<ul class="nav nav-tabs">
<li class="active"><a href="#MaterialData" data-toggle="tab">Material Data</a></li>
<li><a href="#MaterialColorAssignment" data-toggle="tab">Material Color Assignment</a></li>
<li><a href="#MaterialVendorAssignment" data-toggle="tab">Material Vendor Assignment</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="MaterialData">
<div class="panel panel-primary">
<div class="panel panel-heading"><strong>Add/Edit Material</strong></div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<input id="Category" class="form-control max-size" name="Category" required validationMessage="Select Category" />
<span class="k-invalid-msg" data-for="Category"></span>
</div>
<div class="col-md-4">
<input id="Type" class="form-control max-size" name="type" required validationMessage="Select type." />
<span class="k-invalid-msg" data-for="type"></span>
</div>
<div class="col-md-4" id="myDropdown">
<select class="form-control" name="subtype" id="SubType"></select>
</div>
</div>
</div>
</div>
<div class="panel panel-heading"><strong>Material Information</strong></div>
<div class="panel-body">
<div class="row">
<div class="form-group">
<label for="txtWidth" class="control-label col-md-1 col-md-offset-1" id="lblWidth"><b>Width</b></label>
<div class="col-md-2">
<input id="txtWidth" type="text" class="form-control" name="width" required validationMessage="Please add width." />
@*<span class="k-invalid-msg" data-for="width"></span>*@
</div>
<label for="txtLength" class="control-label col-md-1" id="lblLength"><b>Length</b></label>
<div class="col-md-2">
<input id="txtLength" type="text" class="form-control" name="length" required validationMessage="Please add length." />
@*<span class="k-invalid-msg" data-for="length"></span>*@
</div>
<label for="txtSize" class="control-label col-md-1" id="lblSize"><b>Size</b></label>
<div class="col-md-2">
<input id="txtSize" type="text" class="form-control" name="size" required validationMessage="Please add size." />
@*<span class="k-invalid-msg" data-for="size"></span>*@
</div>
</div>
</div>
</div>
<div class="panel panel-heading"><strong>Pricing and Labor Cost</strong></div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="row">
<label for="txtRemodel" class="control-label col-md-offset-5" id="lblDetail"><b>Sell Price</b></label>
<label for="txtRemodel2" class="control-label col-md-offset-2" id="lblDetail"><b>Labor Cost</b></label>
</div><!-- end row -->
<br />
<div class="row">
<label for="txtRemodel12" class="control-label col-md-2" id="lblRemodel">Remodel</label>
<div class="col-md-4 col-md-offset-2">
<input id="txtRemodel" type="text" class="form-control" name="remodel" required validationMessage="Please add sell prize." />
<span class="k-invalid-msg" data-for="remodel"></span>
</div>
<div class="col-md-4">
<input id="txtRemodel2" type="text" class="form-control" name="remodel2" required validationMessage="Please add labor cost." />
<span class="k-invalid-msg" data-for="remodel2"></span>
</div>
</div> <!-- end row -->
</div>
<div class="col-md-6">
<div class="row">
<label for="txtPurchaseQuantity" class="control-label col-md-offset-5" id="lblDetail"><b>Purchase</b></label>
<label for="txtSellQuantity" class="control-label col-md-offset-2" id="lblDetail"><b>Sell</b></label>
</div><!-- end row -->
<br />
<div class="row">
<div class="col-md-3 col-md-offset-1">
<label for="txtQuantity" class="control-label " id="lblQuantity">Quantity</label></div>
<div class="col-md-4 ">
<input id="txtPurchaseQuantity" type="text" class="form-control" name="purchasequantity" required="" validationmessage="Please add purchase qty.">
<span class="k-invalid-msg" data-for="purchasequantity"></span>
</div>
<div class="col-md-4">
<input id="txtSellQuantity" type="text" class="form-control" name="sellquantity" required="" validationmessage="Please add sell qty.">
<span class="k-invalid-msg" data-for="sellquantity"></span>
</div>
</div> <!-- end row -->
<div class="row row-splitter">
<div class="col-md-3 col-md-offset-1"><label for="txtUOM" class="control-label " id="lblUOM">U.O.M</label></div>
<div class="col-md-1 ">
<select class="form-control" name="buyuom" id="ddBuyUOM" style="width:100px;" required validationMessage="Select purchase U.O.M."></select>
<span class="k-invalid-msg" data-for="buyuom"></span>
</div>
<div class="col-md-1 col-md-offset-3">
<select class="form-control" name="selluom" id="ddSellUOM" style="width:100px;" required validationMessage="Select sell U.O.M."></select>
<span class="k-invalid-msg" data-for="selluom"></span>
</div>
</div> <!-- end row -->
</div>
</div>
</div>
</div>
</div><!--End Material Data-->
</div><!--End tab content-->
</div>
</div>
</body>
&#13;