正確對齊字段

Question

我真的需要您的幫助，以正確的縮進和邊距正確地格式化/放置我的表單域及其標籤。標籤「CATEGORY A」和「CATEGORY B」只是示例文本，但實際上它們會動態地改變它的內容和長度，所以重要的是在它重疊在「Button1」和「Button2」元素之前自動包裝它。我在這裏使用bootstrap使我的字段響應。

這是實際的設計格式，我想實現：

這是當前的代碼，我有這麼遠。

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

我想你可能需要使用一些offsets實現你在找什麼

這裏是一個解決方案，您可能必須查看因爲我做了整版不優化較小的視口。 （我會留給你，如果你想要的東西不同）

還要注意根據需要 較長的類別將換行，我不知道你是否知道關於btn-sizing類

另一個需要注意的是可能一直在引起你一些問題，試圖使用內聯樣式，可能會打破一些引導類，只要有可能找到適合你需要的引導類或創建一個自定義類來適應你的需要。這使得編輯後更容易

.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

您需要調整山坳尺寸爲您網格顯示像你想要的。

看看網格文件：

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

你也有不同的山坳大小的手機我不知道你想要的。

如果您的問題是關於您的前兩個字段，請在屏幕截圖中嘗試使用col-md-2標籤和col-md-10作爲字段。請記住，總的行必須始終爲12