ブートストラップフォームが正しく整列していない

ブートストラップでちょうど始まります。 http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_basic&stacked=h ブートストラップフォームが正しく整列していない

しかし、私の学校のサイトのものと同じように整列したフォームが必要です。

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

<div class="container"> 
    <h2>foo View</h2> 
    <form> 
     <div class="form-group"> 
      <label for="fooName">Name:</label> 
      <input class="form-group" id="fooName" type="text" value="fbdshfjdhk"/> 
     </div> 
     <div class="form-group"> 
      <label for="fooghk">ghk:</label> 
      <input class="form-group" id="fooghk" type="text" value="fdsfdsfds"/> 
     </div> 
     <div class="form-group"> 
      <label for="fooXyz">Xyz:</label> 
      <input class="form-group" id="fooXyz" type="text" value="ffdhfjhdsjk"/> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
</div> 
</body 
</html>

出典

2017-01-19 wax_lyrical

フォーム入力タグには、フォームグループではなく、フォームコントロールが必要です。修正されたときにうまく動作します。ここは作業example--

<html> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>Secure Login: Protected Page</title> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      </head> 
 
      <body> 
 

 
<div class="container"> 
 
    <h2>Product View</h2> 
 
    <form> 
 
     <div class="form-group"> 
 
      <label for="productName">Name:</label> 
 
      <input class="form-control" id="productName" type="text" value="fbdshfjdh"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="productDescription">Description:</label> 
 
      <input class="form-control" id="productDescription" type="text" value="fdsfdsfds"/> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="productPrice">Price:</label> 
 
      <input class="form-control" id="productPrice" type="text" value="ffdhfjhdsjk"/> 
 
     </div> 
 
     <button type="submit" class="form-control btn btn-default">Submit</button> 
 
    </form> 
 
</div> 
 
</body> 
 
    </html>

出典

2017-01-19 09:32:15 FreeKrishna

@wax_lyricalあなたがどんな解決策が適切であることが分かった場合、答えとしてそれをマークしてください。 – FreeKrishna

あなたがフォーム適切な形式にするために、適切にグリッドシステムを学ぶべきです。

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h2>Vertical (basic) Form</h2> 
    <form> 
    <div class="form-group"> 
     <label for="email">Email:</label> 
     <input type="email" class="form-control" id="email" placeholder="Enter email"> 
    </div> 
    <div class="form-group"> 
     <label for="pwd">Password:</label> 
     <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox"> Remember me</label> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
</div> 

</body> 
</html>

出典

2017-01-19 12:49:00

ブートストラップフォームが正しく整列していない

答えて

関連する問題