Q&A
auth.cssの内容がinputタグ近辺に使われているならその内容も追記ください。また、どのタイミングでアイコンの状態が変わるのか、その状態のスクリーンショット、bootstrapのバージョンなどの情報も追記ください。
表記の件につきまして質問致します。
以下コードにて鍵のアイコンの縦幅がパスワードの入力フォームより長くなってしまい。
レイアウトが崩れてしまします。
html
1 2<!DOCTYPE html> 3 <head> 4 <meta charset="utf-8"/> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 7 <link href="http://localhost/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 8 <link href="http://localhost/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" /> 9 <link href="http://localhost/css\auth.css" rel="stylesheet" type="text/css" /> 10 <script src="http://localhost/js/jquery.min.js" ></script> 11 <script src="http://localhost/js/bootstrap.min.js" ></script> 12 13 14 </head> 15 16 <body> 17 18 <div class="container"> 19 <script type="text/javascript"> 20$(function(){ 21 $('input[name=show_password]').change(function(){ 22 var typ = "password"; 23 var plh = $('input[name=password]').attr('placeholder'); 24 var val = $('input[name=password]').val(); 25 if($(this).is(':checked')){ 26 typ = "text"; 27 } 28 $('input[name=password]').replaceWith($('<input />').attr({ 29 name: 'password', 30 type: typ, 31 class: 'form-control', 32 placeholder: plh, 33 value: val 34 })); 35 }); 36}) 37</script> 38 39<form action="http://localhost/index.php/auth/signin" class="form-signin form" method="post" accept-charset="utf-8"> 40 <h2 class="form-signin-heading">Please sign in</h2> 41 42 <div class="input-group"> 43 <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span> 44 <input type="text" name="email" value="" placeholder="メールアドレス" class="form-control" autofocus="1" /> 45 </div> 46 47 <div class="input-group"> 48 <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> 49 <input type="password" name="password" value="" placeholder="パスワード" class="form-control" /> 50 </div> 51 52 <div class="checkbox"> 53 <label> 54 <input type="checkbox" name="show_password" value="1" /> 55 パスワードを表示 56 </label> 57 </div> 58 <input type="submit" name="submit" value="サインイン" class="btn btn-lg btn-primary btn-block" /> 59</form> </div> 60 </body> 61 62</html>
情報がありました、ご教授の程、よろしくお願い致します。
回答2件
0
bootstrap はお約束事が多いので、提示された部分だけでは判断できません。基本的にはHTML全部を提示したほうがいいです。
あと、Bootstrap のバージョンによっても作法が変わります。
なぜかバックスラッシュが入っていますね。
html
1<link href="http://localhost/css\auth.css" rel="stylesheet" type="text/css" />
↓
html
1<link href="http://localhost/css/auth.css" rel="stylesheet" type="text/css" />
投稿2016/05/21 08:08
編集2016/05/28 05:00
退会済みユーザー
総合スコア0
0
横幅に設定があって、ソフトウエアで自動改行してるものもあります。
その場合文字が長いと勝手に改行して、レイアウトが崩れます。これは開発環境によるみたいです。お使いのソフトウエア（エディッタかＩＤＥ）で質問すると、当たりが引けるかも。
投稿2016/05/21 08:15
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
