2015-03-13 36 views
0

http://jsfiddle.net/scander/25exnvtg/2/代碼。它看起來像表格在地址字段上放置了一條水平線,而不是在表單末尾。我該如何解決這個問題?看起來像地址指令字段正在造成它。Bootstrap表格顯示換行符早期

<div class="container"> 
    <div class="row"> 

    <h1 class="text-center"><a href="#myModal" role="button" class="btn btn-primary btn-lg" data-toggle="modal">Self-Certify</a></h1> 

    </div> 
</div> 

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel">Section 3 Resident Self-Certification and Skills</h3> 
     </div> 
     <div class="modal-body"> 
     <form> 
      <row> 
         <div class="form-group"><div class="col-sm-5"> 
          <label>First Name</label> 
          <input class="form-control name" placeholder="First name" data-placement="top" data-trigger="manual" data-content="Must be at least 2 characters long, and must only contain letters." type="text"> 
         </div></div> 
         <div class="form-group"><div class="col-sm-2"> 
          <label>MI</label> 
          <input class="form-control mid" placeholder="" data-placement="top" data-trigger="manual" data-content="Middle Inital can only be 1 character long." type="text"> 
         </div></div> 
         <div class="form-group"><div class="col-sm-5"> 
          <label>Last Name</label> 
          <input class="form-control Lastname" placeholder="Last name" data-placement="top" data-trigger="manual" data-content="Must be at least 2 characters long, and must only contain letters." type="text"> 
         </div></div> 
        </row> 
      <row> 
     <div class="form-group"> 
      <label class="control-label col-sm-0"></label> 
      <div class="col-sm-12"> <p class="form-control-static">Home Address (must be a street address and not a P.O. Box number)</p></div> 
      </div> 
      </row>  
      <row> 
         <div class="form-group"><div class="col-sm-9"> 
          <label>Address</label> 
          <input class="form-control address" placeholder="123 Main Street" data-placement="top" data-trigger="manual" data-content="Must be a valid address." type="text"> 
         </div></div> 
         <div class="form-group"><div class="col-sm-3"> 
          <label>Apt#</label> 
          <input class="form-control" placeholder="" type="text"> 
         </div></div> 
        </row> 
        <row> 
         <div class="form-group"><div class="col-sm-4"> 
          <label>City</label> 
          <input class="form-control" placeholder="City" data-placement="top" data-trigger="manual" data-content="Must be at least 2 characters long, and must only contain letters." type="text"> 
         </div></div> 
         <div class="form-group"><div class="col-sm-2"> 
          <label>State</label> 
          <input class="form-control" placeholder="WI" data-placement="top" data-trigger="manual" type="text"> 
         </div></div> 
         <div class="form-group"><div class="col-sm-2"> 
          <label>Zip</label> 
          <input class="form-control" placeholder="Zip" data-placement="top" data-trigger="manual" data-content="Must be at least 2 characters long, and must only contain letters." type="text"> 
         </div></div> 
         <div class="col-sm-4"> 
          <label>County</label> 
         <div class="ui-select"> 
       <select id="County" class="form-control"> 

          <option>Milwaukee</option> 
          <option>Waukesha</option> 
          <option>Ozaukee</option> 
          <option>Washington</option> 
         </select> 
         </div></div> 
        </row> 

      <row> 
      <div class="form-group"><div class="col-sm-6"><label>E-Mail</label><input class="form-control email" placeholder="[email protected] (so that we can contact you)" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address ([email protected])" type="text"></div></div> 
      <div class="form-group"><div class="col-sm-6"><label>Phone</label><input class="form-control phone" placeholder="999-999-9999" data-placement="top" data-trigger="manual" data-content="Must be a valid phone number (999-999-9999)" type="text"></div></div> 
      </row> 
      <div class="form-group"><button type="submit" class="btn btn-success pull-right">Send It!</button> <p class="help-block pull-left text-danger hide" id="form-error">&nbsp; The form is not valid. </p></div> 
     </form> 




     </div> 
     <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> 
     </div> 
    </div> 
    </div> 
</div> 
+0

你是什麼意思*它看起來像表格在地址上放置換行符而不是表格的末尾* – SpringLearner 2015-03-13 16:11:38

+0

我在窗體中放置了一個指令元素,使窗體的末行顯示在它應該顯示之前。它顯示爲通過地址和apt#字段的一行。我不知道如何修復它,以便在電子郵件/電話之後顯示。但在按鈕之前 – 2015-03-13 16:19:10

回答

0

這是在導致新行的指令之前的元素。
編輯:我的意思是說它是導致它的<標籤>元素。

+0

感謝您的評論。我確實認爲你是對的。有沒有辦法添加這些說明而不顯示該行的表單? – 2015-03-13 16:21:29

+0

我認爲應該可以擺脫標籤元素,因爲它不是一個真正的表單標籤,而是指令文本。 – 2015-03-13 17:05:09

+0

您是在談論表單末尾的新行或水平行嗎?我道歉,我可能理解你的問題是錯誤的。 – 2015-03-13 17:08:54