0

私は、美しいジャンボトロンとセクシーな電子メールサインアップバーの行動喚起を備えたサイトを持っています. ただし、私のサイトはドイツ語と英語であり、メール登録フォームのプレースホルダー テキストは何をすべきかの指示です。ドキュメントがモバイルよりも小さい場合、ボタン グループがボタン グループとして機能しないようにするにはどうすればよいですか。これには JS や Jquery を使用したくありません。

http://jsfiddle.net/pgbgD/2/

<form action="http://forkables.us2.list-manage.com/subscribe/post" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="row validate" target="_blank" role="form">
<div class="col-md-8 mc-field-group">
<div class="form-group input-group">
<label class="sr-only" for="mce-EMAIL">Your Email address</label>
<input name="EMAIL" type="email" class="form-control input-lg" id="mce-EMAIL" placeholder="Sign up for our Email newsletter">
<span class="input-group-btn">
<button type="submit" id="mc-embedded-subscribe" class="btn btn-primary btn-lg">Sign up</button>    
</span>
</div>
</div>
</form>
4

1 に答える 1

1

あなたの質問は不明確だと思います。アドオンの動作を削除した後に期待する結果について説明していません。一応画像追加。私は推測しなければなりません。アドオンの動作のほとんどは表示テーブルだと思うので、これをリセットする必要があります。メディア クエリでラップされた Bootstrap の CSS の後に、以下の CSS を追加してみてください。

@media (max-width: 767px) { 
/* unset the table display */   
.form-group.input-group,.input-group-btn{display:inline;}
/* give form elements a width of 100% */
.form-group.input-group input, .form-group.input-group button{width:100%;}
/* give the button it's border radius back */
.form-group.input-group button {border-radius: 6px !important;} 
}

また、フォーム ラベルの .sr-only クラスを .visible-xs に置き換えることも検討してください。

プレースホルダーも削除したい場合は、CSS のみでこれを行うことはできません。次を参照してください: css または jquery を使用して、フォーカス時にプレースホルダー テキストを自動的に非表示にする方法を教えてください。

しかし、あなたは試すことができます(from: Change an HTML5 input's placeholder color with CSS ):

@media (max-width: 767px) { 
.form-control::-webkit-input-placeholder { /* WebKit browsers */
    color:transparent;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:transparent;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:transparent;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:transparent;
}

}

デモ: http://bootply.com/80881

于 2013-09-13T22:40:59.743 に答える