Felder richtig ausrichten

Question

Ich brauche wirklich Ihre Hilfe, um meine Formularfelder und ihre Beschriftungen korrekt zu formatieren und zu positionieren. Die Beschriftungen "CATEGORY A" und "CATEGORY B" sind nur Beispieltext, aber tatsächlich werden Inhalt und Länge dynamisch geändert. Daher ist es wichtig, sie automatisch zu umbrechen, bevor sie die Elemente "Button1" und "Button2" überlappen. Ich benutze Bootstrap hier, um meine Felder ansprechbar zu machen.

Dies ist die eigentliche Design-Format, das ich erreichen möchte:

Und dies ist der aktuelle Code, den ich bis jetzt haben.

JSFIDDLE

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="form-group "> 
 
\t <label class="control-label col-xs-6 col-md-3" for="main-field-1">Field 1</label> 
 
\t <div class="form_field col-xs-6 col-md-9 required"> 
 
     <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text">  
 
    <div class="" style="display:none"></div> 
 
\t </div> 
 
</div> 
 

 
<div class="form-group "> 
 
\t <label class="control-label col-xs-6 col-md-3" for="main-field-2">Field 2</label> 
 
\t <div class="form_field col-xs-6 col-md-9 required"> 
 
     <input class="form-control " id="main-label-2" name="main-field-2" placeholder="Number" title="Enter Value" type="text">  
 
     <div class="" style="display:none"></div> 
 
\t </div> 
 
</div> 
 

 
<h4> 
 
Other Fields 
 
</h4><BR><BR> 
 

 
CATEGORY A <button class="btn btn-primary" style="min-width:55px;margin-right:3px;margin-bottom:3px;padding:3px" title="">Button 1</button><button class="btn btn-primary" style="min-width:55px;margin-right:3px;margin-bottom:3px;padding:3px" title="">Button 2</button> 
 

 

 
<div class="form-group "> 
 
\t <label class="control-label col-xs-6 col-md-3" for="main-field-1">Field 1</label> 
 
\t <div class="form_field col-xs-6 col-md-9 required"> 
 
     <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text">  
 
    <div class="" style="display:none"></div> 
 
\t </div> 
 
</div> 
 

 
<div class="form-group "> 
 
\t <label class="control-label col-xs-6 col-md-3" for="main-field-2">Field 2</label> 
 
\t <div class="form_field col-xs-6 col-md-9 required"> 
 
     <input class="form-control " id="main-label-2" name="main-field-2" placeholder="Number" title="Enter Value" type="text">  
 
     <div class="" style="display:none"></div> 
 
\t </div> 
 
</div> 
 

 
CATEGORY B <button class="btn btn-primary" style="min-width:55px;margin-right:3px;margin-bottom:3px;padding:3px" title="">Button 1</button><button class="btn btn-primary" style="min-width:55px;margin-right:3px;margin-bottom:3px;padding:3px" title="">Button 2</button> 
 

 

 
<div class="form-group "> 
 
\t <label class="control-label col-xs-6 col-md-3" for="main-field-1">Field 1</label> 
 
\t <div class="form_field col-xs-6 col-md-9 required"> 
 
     <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text">  
 
    <div class="" style="display:none"></div> 
 
\t </div> 
 
</div> 
 

 
<div class="form-group "> 
 
\t <label class="control-label col-xs-6 col-md-3" for="main-field-2">Field 2</label> 
 
\t <div class="form_field col-xs-6 col-md-9 required"> 
 
     <input class="form-control " id="main-label-2" name="main-field-2" placeholder="Number" title="Enter Value" type="text">  
 
     <div class="" style="display:none"></div> 
 
\t </div> 
 
</div>

Answer 1

Ich glaube, Sie müssen möglicherweise einige offsets verwenden zu erreichen, was Sie suchen

Hier ist eine Lösung, die Sie volle Seite sehen kann, da ich tat nicht die kleineren Ansichtsfenster optimieren. (Ich werde das für Sie lassen, wenn Sie etwas anderes wollen)

Beachten Sie auch, dass die längeren Kategorien Linien wickeln als benötigt, und ich bin nicht sicher, ob Sie über die btn-sizing Klassen wusste

andere beachten Sie, dass Möglicherweise haben Sie ein Problem verursacht, bei dem versucht wurde, Inline-Stile zu verwenden, die möglicherweise einige der Bootstrap-Klassen durchbrechen, wenn möglich Bootstrap-Klassen finden, die Ihren Anforderungen entsprechen, oder eine benutzerdefinierte Klasse erstellen, die Ihren Anforderungen entspricht. Es macht die Bearbeitung später viel einfacher

.other-fields { 
 
    margin: 40px 0 20px; 
 
    font-weight: 700; 
 
} 
 

 
.btn-custom { 
 
    min-width: 55px; 
 
    margin-right: 3px; 
 
    margin-bottom: 3px; 
 
    padding: 3px 
 
} 
 
.row.row-fg.category{ 
 
    margin-top:20px; 
 
    margin-bottom:20px; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript -->  
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="container"> 
 
<form class="form"> 
 
    <div class="row row-fg "> 
 
    <label class="control-label col-md-3" for="main-field-1">Field 1</label> 
 
    <div class="form_field col-md-9 required"> 
 
     <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text"> 
 
     <div class="" style="display:none"></div> 
 
    </div> 
 
    </div> 
 

 
    <div class="row row-fg "> 
 
    <label class="control-label col-md-3" for="main-field-2">Field 2</label> 
 
    <div class="form_field col-md-9 required"> 
 
     <input class="form-control " id="main-label-2" name="main-field-2" placeholder="Number" title="Enter Value" type="text"> 
 
     <div class="" style="display:none"></div> 
 
    </div> 
 
    </div> 
 
    <div class="of-cont"> 
 

 
    <h4 class="other-fields">Other Fields</h4> 
 

 
    <div class="row row-fg category"> 
 
     <div class="col-md-offset-1 col-md-3"> 
 
     CATEGORY A 
 
     </div> 
 
     <div class="col-md-8"> 
 
     <button class="btn btn-primary btn-custom">Button 1</button> 
 
     <button class="btn btn-primary btn-custom" title="">Button 2</button> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="row row-fg "> 
 
     <label class="control-label col-md-offset-1 col-md-2 text-right" for="main-field-1">Field 1</label> 
 
     <div class="form_field col-md-offset-1 col-md-8 required"> 
 
     <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text"> 
 
     <div class="" style="display:none"></div> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="row row-fg "> 
 
     <label class="control-label col-md-offset-1 col-md-2 text-right" for="main-field-1">Field 1</label> 
 
     <div class="form_field col-md-offset-1 col-md-8 required"> 
 
     <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text"> 
 
     <div class="" style="display:none"></div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 

 
    <div class="row row-fg category"> 
 
    <div class="col-md-offset-1 col-md-3"> 
 

 
     CATEGORY B is a long title that should wrap lines. Notice these btns are using btn sizing classes 
 

 
    </div> 
 
    <div class="col-md-8"> 
 
     <button class="btn btn-primary btn-xs">Button 1</button> 
 
     <button class="btn btn-primary btn-sm" title="">Button 2</button> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="row row-fg "> 
 
    <label class="control-label col-md-offset-1 col-md-2 text-right" for="main-field-1">Field 1</label> 
 
    <div class="form_field col-md-offset-1 col-md-8 required"> 
 
     <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text"> 
 
     <div class="" style="display:none"></div> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="row row-fg "> 
 
    <label class="control-label col-md-offset-1 col-md-2 text-right" for="main-field-1">Field 1</label> 
 
    <div class="form_field col-md-offset-1 col-md-8 required"> 
 
     <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text"> 
 
     <div class="" style="display:none"></div> 
 
    </div> 
 
    </div> 
 
    </form> 
 
</div>

Answer 2

Sie müssen die Spalte Größe anpassen für Sie Raster wie Sie anzeigen möchten.

Werfen Sie einen Blick auf die Raster-Dokumentation:

https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

Auch Sie haben verschiedene col Größe für Telefone Ich bin nicht sicher, dass wollen.

Wenn Ihre Frage so ist, dass Ihre ersten beiden Felder wie im Screenshot aussehen, versuchen Sie es mit col-md-2 für label und col-md-10 für das Feld. Denken Sie daran, dass insgesamt für eine Zeile immer 12 sein muss