Bootstrap對齊表單文本框

我是Bootstrap的新手，並試圖創建一個帶有13個字段的簡單表單。我使用內聯，因爲我想顯示彼此相鄰的字段（標籤：文本框）它在移動設備上正常工作（列出其中一個是正確的），但在PC上它並沒有顯示有序。我如何對齊三欄中的字段，以使它們在PC瀏覽器上看起來有序。這是我的電流輸出： http://upupa.byethost10.com/session1.html#Bootstrap對齊表單文本框

我的代碼如下：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Session Details</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h2>Session Details</h2> 
    <p></p> 
    <form class="form-inline" role="form"> 

    <div class="form-group"> 
     <label for="date">Date:</label> 
     <input type="date" class="form-control" id="date" placeholder="Date"> 
    </div> 
<div class="form-group"> 
    <label for="Site">Site:</label> 
    <div class="form-group"> 
    <select id="Site" name="Site" class="form-control"> 
     <option value="1">Xaghra</option> 
     <option value="2">Option two</option> 
     <option value="">Populated by database</option> 
    </select> 
    </div> 
</div> 


    <div class="form-group"> 
     <label for="ringer">Ringer:</label> 
     <input type="text" class="form-control" id="ringer" placeholder="Ringer"> 
    </div> 

     <div class="form-group"> 
     <label for="Net Length">Net Length:</label> 
     <input type="number" class="form-control" id="Net Length" placeholder="Net Length"> 
    </div> 

    <div class="form-group"> 
     <label for="Net Remarks">Net Remarks:</label> 
     <input type="text" class="form-control" id="Net Remarks" placeholder="Net Remarks"> 
    </div> 

    <div class="form-group"> 
     <label for="Tape Lure 1">Tape Lure 1:</label> 
     <input type="text" class="form-control" id="Tape Lure 1" placeholder="Tape Lure 1"> 
    </div> 

    <div class="form-group"> 
     <label for="Tape Lure 2">Tape Lure 2:</label> 
     <input type="text" class="form-control" id="Tape Lure 2" placeholder="Tape Lure 2"> 
    </div> 

    <div class="form-group"> 
     <label for="Tape Lure 3">Tape Lure 3:</label> 
     <input type="text" class="form-control" id="Tape Lure 3" placeholder="Tape Lure 3"> 
    </div> 

    <div class="form-group"> 
     <label for="Remarks">Remarks:</label> 
     <input type="text" class="form-control" id="Remarks" placeholder="Remarks"> 
    </div> 

    <div class="form-group"> 
     <label for="Cloud Cover">Cloud Cover:</label> 
     <input type="text" class="form-control" id="Cloud Cover" placeholder="Cloud Cover"> 
    </div> 

    <div class="form-group"> 
     <label for="Wind Direction">Wind Direction:</label> 
     <input type="text" class="form-control" id="Wind Direction" placeholder="Wind Direction"> 
    </div> 

    <div class="form-group"> 
     <label for="Wind Strength">Wind Strength:</label> 
     <input type="number" class="form-control" id="Wind Strength" placeholder="Wind Strength"> 
    </div> 

    <div class="form-group"> 
     <label for="Rain">Rain:</label> 
     <input type="text" class="form-control" id="Rain" placeholder="Rain"> 
    </div> 

    <button type="submit" class="btn btn-default">Submit</button> 
    </form> 

</div>

感謝

來源

2015-08-27 elstiv

查看水平表單而不是內聯表單。然後，您可以創建網格列，並將表單放置在那裏（標籤和字段仍然是內聯的）。 – Lee

你想讓表單在桌面上看起來像什麼？每行多少個字段，多少行等等？ – jonmrich

我只想對3列中的所有東西進行排序，以便它們可以在PC上訂購 – elstiv

你需要使用<div class="row">把input s表示你想組合成行和各form-group （例如）<div class="col-md-4">。

我這樣做是爲了您的第一套三個輸入這裏：http://jsfiddle.net/jonmrich/bz59xucp/

檢查到文檔引導，以瞭解如何有效地使用行和列。

來源

2015-08-27 10:39:15 jonmrich

Bootstrap對齊表單文本框

回答

相關問題