Question

我遇到了对齐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&nbsp;Price</b></label>
                                        <label for="txtRemodel2" class="control-label col-md-offset-2" id="lblDetail"><b>Labor&nbsp;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>

Answer 1

尝试下面的代码段

＆＃13;

<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&nbsp;Price</b></label>
                                        <label for="txtRemodel2" class="control-label col-md-offset-2" id="lblDetail"><b>Labor&nbsp;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;

在正确对齐标签时遇到问题

1 个答案: