3

Bootstrapを使ってログインID入力のみのログイン画面の作成を行っています。表示画面が小さくなってもユーザIDラベル、テキストボックス、submitボタンを横一列で表示するようにしたいのですが下記のコードではうまくいかず困っています。
どのようにコードを記載すればよろしいでしょうか。
自身が書いたソースは下記となります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap練習</title>
    
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>

  </head>
  <body>
    <h1>ログイン画面</h1>
    <div class="container" style="padding:20px 0">

      <form class="form-inline" style="margin-bottom:15px;">
       <div class="form-group">
         <label class="control-label" for="userId">ユーザーID</label>
         <input type="text" id="userId" class="form-control" placeholder="ユーザーIDを入力">
       </div>
       <div class="form-group">
         <input type="submit" value="submit" class="btn btn-primary">
       </div>
     </form>

   </div>

</body>
</html>

0

1 件の回答 1

1

多少デザインが変わりますが、このような感じではいかがでしょう?

<div class="container" style="padding:20px 0">
    <form class="form-inline" style="margin-bottom:15px;">
        <div class="form-group">
            <label class="control-label" for="userId">ユーザーID</label>
            <div class="input-group">
                <input type="text" id="userId" class="form-control" placeholder="ユーザーIDを入力">
                <span class="input-group-btn"><input type="submit" value="submit" class="btn btn-primary"></span>
            </div>
        </div>
    </form>
</div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。