2017-03-15 6 views
0

I mit Ausrichtung 2 Etiketten ein Problem habe, ist hier ein Screenshot des Bildes, wie es jetzt ist, Blick auf die Menge und UOM EtikettenHaben Sie Probleme auf Ausrichten Etiketten richtig

As it is now

als Sie können die Menge und Mengeneinheit ist zu weit von der Kauf Spalte sehen, muss ich näher diese beiden Etiketten bekommen, so würde es so

After

aussehen, wie Sie ich brauche die Menge und UOM labe sehen ls näher als auf dem Bild. Ich habe versucht, einen Stil von Text rechts auszurichten und das hat nicht funktioniert.

Wie kann ich die zwei Etiketten mehr nach rechts verschieben? Hier

ist der vollständige Code

<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> 
+0

welche Stile für die 'label' gesetzt werden? – Toxide82

+0

@ Toxide81, nur die Bootstrap-Klassen, habe ich ihnen einen Stil früher hinzugefügt, nur eine einfache Textausrichtung rechts und es hat nicht funktioniert, so dass ich den Stil entfernt – Chris

+0

hast du versucht mit! Wichtig auf nicht, dass es verwenden sollte, nur um überprüfen Sie, dass sie funktionieren würden. – Toxide82

Antwort

0

versuchen Snippet unten

<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>

+0

Wenn Sie dem Etikett einen 100% breiten Stil geben, wird der Text besser auf den Etiketten ausgerichtet – Toxide82

Verwandte Themen