使用引導的水平表單

大家好我在嘗試使用twitters bootstrap實現一個水平表單，但由於某些原因，標籤繼續顯示爲塊級別的項目，而不是在文本框旁邊浮動。我的代碼在下面任何人都可以幫忙。使用引導的水平表單

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> 
    <title></title> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="/css/bootstrap.min.css"> 
    <!-- Optional theme --> 
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css"> 
    <!-- Latest compiled and minified JavaScript --> 

    <script src="/Scripts/jquery-2.0.3.min.js"></script> 
    <script src="/Scripts/bootstrap.js"></script> 
    <script src="/js/prettyPhoto/jquery.prettyPhoto.js" type="text/javascript"></script> 
    <script src="/js/document.ready.js" type="text/javascript"></script> 
    <link href="/js/prettyPhoto/prettyPhoto.css" rel="stylesheet" type="text/css"> 
    <link href="/css/loggedin.css" rel="stylesheet" type="text/css"> 
</head> 
<body screen_capture_injected="true"> 
    <form method="post" action="feedback.aspx" id="form1" class="form-horizontal"> 
     <div class="container"> 
      <div class="row"> 
       <h1>Feedback &amp; comments</h1> 
       <div class="row"> 
        <p>Please use the form below to give us your feedback, comments, and suggestions to improve the site.</p> 
        <fieldset> 
         <legend>Feedback</legend> 
         <div class="control-group"> 
          <label class="control-label" for="MainBodyContent_TxtEmail">Email</label> 
          <div class="controls"> 
           <input name="ctl00$MainBodyContent$TxtEmail" type="text" value="" id="MainBodyContent_TxtEmail" class="input-xlarge" placeholder="Email"> 
          </div> 
         </div> 
         <div class="control-group"> 
          <label class="control-label" for="MainBodyContent_TxtEmail">Name</label> 
          <div class="controls"> 
           <input name="ctl00$MainBodyContent$TxtName" type="text" id="MainBodyContent_TxtName" class="input-xlarge" placeholder="Name"> 
          </div> 
         </div> 
         <div class="control-group"> 
          <label class="control-label" for="MainBodyContent_TxtEmail">Comments</label> 
          <div class="controls"> 
           <textarea name="ctl00$MainBodyContent$TxtComments" rows="2" cols="20" id="MainBodyContent_TxtComments" class="input-xlarge" placeholder="Comments"></textarea> 

          </div> 
         </div> 
         <input type="submit" name="ctl00$MainBodyContent$SendFeedback" value="Send" id="MainBodyContent_SendFeedback" class="btn"> 
        </fieldset> 
       </div> 
      </div> 
     </div> 
    </form> 
</body> 
</html>

來源

2014-05-21 andrew slaughter

你將不得不與列工作，你可以看到在documentation of Bootstrap一個例子（向下滾動到水平的形式）。

代碼示例：

<form class="form-horizontal" role="form"> 
    <div class="form-group"> 
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
    <div class="col-sm-10"> 
     <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
    </div> 
    </div> 
</form>

來源

2014-05-21 12:11:10

感謝我在引導閱讀O'Reillys的書，它並沒有提到，但它的偉大工程 –

真棒。如果這能幫助你，請註冊並標記爲解決方案！ –

使用引導的水平表單

回答

相關問題