30297


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

[code]

    <!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>
[/code]


CC BY-SA 3.0
2016-11-07T15:59:19.923
30196
2016-11-10T04:50:46.343
2016-11-09T13:47:39.200
5519
17348
question
html5 bootstrap
画面が小さくなっても要素を横一列に並んだままにしたい


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

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2016-11-10T04:50:46.343
30297
2016-11-10T04:50:46.343
19243
30196
answer