Bootstrap窗體，列不能按預期的方式工作於必填字段

我正在嘗試創建一個表單，它將在窗體中顯示帶有驗證的錯誤消息框。Bootstrap窗體，列不能按預期的方式工作於必填字段

我似乎無法使錯誤框適合與窗體（標籤 - 輸入）列完全相同的寬度。無論我做什麼，它似乎都關閉了。所以暫時我把它作爲col-sm-12。有人可以向我解釋爲什麼我似乎無法得到這個匹配的標籤寬度和輸入寬度？

我也有同樣的問題與所需的跨度。我試圖讓「需求文本」排列在輸入框下方。不管我做什麼都行不通。我可以將左邊填充以適合每個尺寸，但這看起來很愚蠢，因爲我認爲使用cols的框架應該爲我做這件事？有人可以幫助我瞭解我所缺少的。我對bootstrap相當陌生，而我只是難住。如果我把class =「col-sm-9 col-sm-offest-2放在所需的跨度上，它不會像class =」col-sm-12「一樣保持不變。我猜測它需要保持在我把它拉出去的東西瘋了...

這裏是一個標籤輸入和所需跨度的樣本，我可以正確工作的唯一的東西是col-sm-12，以便它至少與東西排成一行但它看起來荒謬的。

<div class="form-group"> 
     <label class="col-sm-2 control-label" for="InputAddress1">Address 1</label> 
     <div class="col-sm-9 col-sm-offest-2 input-group"> 
      <span class="input-group-addon"><i class="glyphicon glyphicon-asterisk"></i></span> 
      <input type="text" class="form-control" placeholder="Address Line 1" autofocus required> 
     </div>                                
     <span class="error col-sm-12">Required</span> 
    </div>

完全的代碼示例在這裏可以查看 https://stevia-affirm.codio.io/Question.html

謝謝吉娜

來源

2014-05-21 gbeford

我認爲你在Require中遇到的問題是你有一個錯字（也許你做了複製和粘貼以重複所需跨度上的錯誤？）。

由於標籤的col-sm-2已經存在，因此您不需要輸入組中的偏移量。如果你改正了錯字，你會得到一些難看的東西，因爲你有太多的列（即2+ 2+ 9 = 13）。只需放下那裏的偏移量。

那麼你可以添加偏移到您所需的（沒有錯字;-)：

<span class="error col-sm-9 col-sm-offset-2">Required</span>

另外，你的好是窗體的寬度。它看起來可能不是這樣，因爲右對齊的標籤和事實，每個標籤+輸入只加起來11而不是12.

編輯：這裏是一個清理版本的形式（大部分）。您會注意到，我將輸入組包裝在各列的不同類中。其原因是使用form-horizontal和input-group-addons的組合，使輸入爲100％+ addon元素的固定寬度。包裝這樣的一切將產生你想要的結果。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- Core CSS --> 
    <link rel="stylesheet" type="text/css" href="plugins/bootstrap-3.1.1-dist/css/bootstrap.min.css"> 
</head> 
<body> 

    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h1>Employee Information</h1> 
      </div> 
     </div> 
    </div> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-12" style="padding-top:30px;"> 
       <div class="alert alert-danger "> 
        <span class="glyphicon glyphicon-alert "></span><strong> message</strong> 
       </div> 
      </div>   
     </div> 
    </div> 

    <div class="container"> 
     <form class="form-horizontal" role="form"> 
      <div class="form-group"> 
       <label class="col-sm-2 control-label ">Name</label> 
       <div class="col-sm-10"> 
        <div class="input-group"> 
         <span class="input-group-addon "><i class="glyphicon glyphicon-asterisk "></i></span> 
         <input type="text" placeholder="Name " class="form-control"> 
        </div> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-sm-2 control-label" for="InputAddress1">Address 1</label> 
       <div class="col-sm-10"> 
        <div class="input-group"> 
         <span class="input-group-addon"><i class="glyphicon glyphicon-asterisk"></i></span> 
         <input type="text" class="form-control" placeholder="Address Line 1" autofocus required> 
        </div> 
       </div> 
       <span class="error col-sm-10 col-sm-offset-2">Required</span> 
      </div> 
      <div class="form-group"> 
       <label class="col-sm-2 control-label" for="InputAddress2">Address 2</label> 
       <div class="col-sm-10"> 
        <div class="input-group"> 
         <span class="input-group-addon input-group-addon_width"><i class=""></i></span> 
         <input type="text" class="form-control" placeholder="Address Line 2"> 
        </div> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-sm-2 control-label" for="InputCity">City</label> 
       <div class="col-sm-10"> 
        <div class="input-group"> 
         <span class="input-group-addon"><i class="glyphicon glyphicon-asterisk form-control-feedback"></i></span> 
         <input ng-model="demo.city" ng-disabled="!editAllowed" type="text" class="form-control" placeholder="City" required> 
        </div> 
       </div> 
       <span ng-show="demographics_form.city.$error.required" class="error col-sm-10 col-sm-offset-2">Required</span> 
      </div> 
      <div class="form-group"> 
       <label class="col-sm-2 control-label" for="InputState">State</label> 
       <div class="col-sm-10"> 
        <div class="input-group"> 
         <span class="input-group-addon"><i class="glyphicon glyphicon-asterisk form-control-feedback"></i></span> 
         <select id="state" class="form-control" required> 
          <option >State</option> 
         </select> 
        </div> 
       </div> 
      </div> 
      <div ng-hide="!editAllowed" class="col-sm-12"> 
       <div class="row"> 
        <div class="col-sm-offset-4 col-sm-2"> 
         <button class="btn btn-success btn-block">Submit</button> 
        </div> 
        <div class="col-sm-2"> 
         <button class="btn btn-info btn-block">Cancel</button> 
        </div> 
       </div> 
      </div> 
     </form> 
    </div> 
</body> 
</html>

來源

2014-05-21 14:27:59 jme11

謝謝你注意到，但是刪除它仍然是我的問題？我仍然對如何使它正確排列感到困惑......什麼是正確的方法來做到這一點？再次我會認爲框架會這樣做？ – gbeford

我用清理好的表格樣本更新了我的答案。 – jme11

非常感謝你，我現在看到你做了什麼:)並按我的預期工作。 – gbeford

Bootstrap窗體，列不能按預期的方式工作於必填字段

回答

相關問題