1. 首頁
  2. 問答
  3. Bootstrap .form-horizo​​ntal不起作用

Bootstrap .form-horizo​​ntal不起作用

2014-02-18 83 views
5

我是第一次嘗試bootstrap的人。我想要達到的目的是讓標籤和輸入的線條更加乾淨整潔。Bootstrap .form-horizo​​ntal不起作用

任何人都可以解釋爲什麼在下面的例子中標籤仍然在輸入之上？難道我做錯了什麼？

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <meta application-name="Test-System"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- Bootstrap Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 

    <!-- Bootstrap Latest compiled and minified JavaScript --> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

    <!-- jQuery UI from Google CDN --> 
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> 
    <title></title> 
</head> 
<body> 

    <form class="form-horizontal"> 
     <div class="control-group"> 
      <label for="input1" class="control-label">Label</label> 
      <div class="controls"> 
       <input id="input1" type="text"> 
      </div> 
     </div> 

     <div class="control-group"> 
      <label for="input2" class="control-label">Label</label> 
      <div class="controls"> 
       <input id="input2" type="text"> 
      </div> 
     </div> 
    </form> 

    <!-- jQuery from Google CDN --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <!-- jQuery UI from Google CDN --> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
</body> 
</html>

來源

2014-02-18 Stefanos Vakirtzis

回答

8 
<div class="controls"> 
       <label for="input1" class="control-label">Label</label> 
       <input id="input1" type="text"> 
</div>

這是你在找什麼？

編輯 來自輸入分隔符外部的水平標籤。

<div class="control-group"> 
     <label for="input1" class="control-label col-sm-2">Label</label> 
     <div class="controls col-sm-10"> 
      <input id="input1" type="text"> 
     </div> 
    </div>

來源

2014-02-18 19:21:50 Chris

+0

確實很好多數民衆贊成我一直在尋找非常感謝。但爲了不顯得那麼愚蠢，我上面做錯了什麼？因爲我已經看到了許多使用外部控件div的標籤，並且仍然具有單行效果。 –

+1

@StefanosVakirtzis看來，水平顯示是由'col-sm-2'和'col-sm-10'製作的。 – Chris

+0

謝謝你的幫助，非常感謝。 :) –

-2

試試這個寶石。它對我來說很輕鬆。

寶石「simple_form_bootstrap3」

需要「horizo​​ntal_form_for」取代的form_for

來源

2014-11-17 14:25:21

相關問題

 相關問題