質問編集履歴

2 ご指摘箇所の修正

wanabeeee

wanabeeee score 19

2016/03/18 20:57  投稿

reCAPTCHAをbootstrap3でレスポンシブにするには?
https://www.google.com/recaptcha/intro/index.html
Google reCAPTCHAをbootstrapでデザインしたログイン画面にreCHAPTCHAをつけたのですが、いくつかサイトをみてCSSを上書いて?レスポンシブにするのを試してみたのですが、どうにも横幅をinput type="text"などに合わせることができません。
もしやり方をご存知の方がいましたら教えていただけたら幸いです。
JSの利用でも構いません。
以下にソースを記載いたします。
```HTML
<div class="row">
   <div class="col-md-4 col-md-offset-4">
       <div class="panel">
       <div class="panel panel-default">
           <div class="panel-heading">
               <h2 class="panel-title">ログイン</h2>
           </div>
           <div class="panel-body">
               <form action="" id="" method="post" >
                   <fieldset>
                       <div class="form-group">
                           <input name="" class="form-control" type="text" id=""/>
                       </div>
                       <div class="form-group">
                           <input name="" class="form-control" type="password" id=""/>
                       </div>
                       <div class="form-group">
                           <script src='https://www.google.com/recaptcha/api.js?hl=ja'></script>
                           <div class="g-recaptcha" data-sitekey="hogehoge"></div>
                       </div>
                       <button type="submit" class="btn btn-lg btn-success">ログイン</button>
                   </fieldset>
               </form>
           </div>
       </div>
   </div>
</div>
```
以上、よろしくお願い致します。
以上、よろしくお願い致します。
2016-03-18 追記
panel-defaultを追加しました
CSSは以下から取得しています
//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
添付画像を追加しました
![画像1](6e42eda965ccf406b2be1acd1ea60bb9.png)
![画像2](01e1d8906ef1d4557f2f7d2ae8968826.png)
雑なイメージで申し訳ないですが・・
「私はロボットではありません」のところを伸び縮みさせたいです。
![画像3](7e4fe613da9fcd5e321d5beef4cef96c.png)
  • CSS3

    4039 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

1 tagの変更

wanabeeee

wanabeeee score 19

2016/03/18 09:09  投稿

reCAPTCHAをbootstrap3でレスポンシブにするには?
https://www.google.com/recaptcha/intro/index.html
Google reCAPTCHAをbootstrapでデザインしたログイン画面にreCHAPTCHAをつけたのですが、いくつかサイトをみてCSSを上書いて?レスポンシブにするのを試してみたのですが、どうにも横幅をinput type="text"などに合わせることができません。
もしやり方をご存知の方がいましたら教えていただけたら幸いです。
JSの利用でも構いません。
以下にソースを記載いたします。
```HTML
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel">
<div class="panel-heading">
<h2 class="panel-title">ログイン</h2>
</div>
<div class="panel-body">
<form action="" id="" method="post" >
<fieldset>
<div class="form-group">
<input name="" class="form-control" type="text" id=""/>
</div>
<div class="form-group">
<input name="" class="form-control" type="password" id=""/>
</div>
<div class="form-group">
<script src='https://www.google.com/recaptcha/api.js?hl=ja'></script>
<div class="g-recaptcha" data-sitekey="hogehoge"></div>
</div>
<button type="submit" class="btn btn-lg btn-success">ログイン</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
```
以上、よろしくお願い致します。
  • CSS3

    4039 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • HTML5

    7772 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • JavaScript

    28957 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る