タグ付けされた質問 「twitter-bootstrap」

私は現在、次のように開始されたTwitter Bootstrapでポップオーバーを使用しています。 $('.popup-marker').popover({ html: true, trigger: 'manual' }).click(function(e) { $(this).popover('toggle'); e.preventDefault(); }); ご覧のとおり、これらは手動でトリガーされ、.popup-marker（背景画像のあるdiv）をクリックすると、ポップオーバーが切り替わります。これはうまく機能しますが、ページの他の場所をクリックするだけでポップオーバーを閉じることもできます（ただし、ポップオーバー自体ではありません！）。 次のようないくつかのことを試しましたが、結果は表示されません。 $('body').click(function(e) { $('.popup-marker').popover('hide'); }); ポップオーバー自体をクリックするのではなく、ページの他の場所をクリックしてポップオーバーを閉じるにはどうすればよいですか？

155 javascript  jquery  twitter-bootstrap 

私はモーダルフォームのサイズを変更しようとしています。つまり、そこでレンダリングするコンテンツに応答するようにしています。私はそれをフォームのレンダリングに使用しており、必要に応じてスクロールを処理することを望んでいます。 私がレンダリングするフォームには、おそらくさらに50pxが必要です-ボタンがないだけです。 そのため、application.css.scssファイルの.modalスタイルを上書きしてみましたが（Rails 3.2を使用）、max-heightとオーバーフローデクレレーションが上書きされているようです。 何かご意見は？

154 twitter-bootstrap 

jQuery Validation Pluginを使用してフォームに検証を追加しようとしていますが、入力グループを使用しているときにプラグインがエラーメッセージを表示するという問題があります。 $('form').validate({ rules: { firstname: { minlength: 3, maxlength: 15, required: true }, lastname: { minlength: 3, maxlength: 15, required: true } }, highlight: function(element) { $(element).closest('.form-group').addClass('has-error'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error'); } }); 私のコード： http : //jsfiddle.net/hTPY7/4/

154 twitter-bootstrap  jquery-validate  twitter-bootstrap-3 

もう一度更新します。質問を本当に理解せずに人々が回答を追加できないように、上の回答を選択してこの質問を閉じます。実際には、グリッドを使用したり、CSSを追加したりせずに、組み込み機能でそれを行う方法はありません。help-blockたとえば、短い入力を超える必要がある要素を処理している場合、グリッドはうまく機能しませんが、それらは「組み込み」です。それが問題である場合は、BS3のディスカッションで見つけることができる追加のCSSクラスを使用することをお勧めします。BS4がリリースされたので、付属のサイジングスタイルを使用してこれを管理することができるので、これはそれほど長くは関係ありません。この人気のあるSO質問への良い入力に感謝します。 更新：この質問は、グリッドに頼らずに入力幅を管理するBSの組み込み機能に関するものであるため、未解決のままです（場合によっては、個別に管理する必要があります）。これを管理するためにすでにカスタムクラスを使用しているため、これは基本的なCSSのハウツーではありません。タスクはBS 機能のディスカッションリストにあり、まだ対処されていません。 元の質問： BS 3で入力幅を管理する方法を誰かが理解していますか？現在、その機能を追加するためにいくつかのカスタムクラスを使用していますが、ドキュメントに記載されていないオプションの一部を見逃している可能性があります。 現在のドキュメントでは.col-lg-xを使用するように言われていますが、コンテナーdivにしか適用できないため、レイアウト/フロートのあらゆる種類の問題が発生するため、明らかに機能しません。 ここにフィドルがあります。奇妙なことに、フィドルではフォームグループのサイズを変更することさえできません。 http://jsfiddle.net/tX3ae/ <form role="form" class="row"> <div class="form-group col-lg-1"> <label for="code">Name</label> <input type="text" class="form-control"> </div> <div class="form-group col-lg-1 "> <label for="code">Email</label> <input type="text" class="form-control input-normal"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div>

154 css  twitter-bootstrap  twitter-bootstrap-3 

「data-toggle」を介して複数のイベントをブートストラップコントロールに割り当てる方法はありますか？たとえば、「ツールチップ」と「ボタン」トグルが割り当てられたボタンが欲しいとしましょう。 data-toggle = "tooltip button"を試しましたが、機能したのはツールチップのみです。 編集： これは簡単に「回避可能」です $("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");

153 button  twitter-bootstrap  binding 

[ウィッシュリストに追加]ボタンをクリックしたときにアラートを呼び出し、2秒でアラートが消えるようにする必要があります。これは私が試した方法ですが、アラートが表示されるとすぐに消えます。バグがどこにあるかわからない。誰でも手伝ってくれる？ JSスクリプト $(document).ready (function(){ $("#success-alert").hide(); $("#myWish").click(function showAlert() { $("#success-alert").alert(); window.setTimeout(function () { $("#success-alert").alert('close'); }, 2000); }); }); HTMLコード： <div class="product-options"> <a id="myWish" href="" class="btn btn-mini">Add to Wishlist </a> <a href="#" class="btn btn-mini"> Purchase </a> </div> 警告ボックス： <div class="alert alert-success" id="success-alert"> <button type="button" class="close" data-dismiss="alert">x</button> <strong>Success!</strong> Product have added to your …

153 javascript  html  twitter-bootstrap  alert 

ここでは、Twitterのブートストラップのポップオーバーを使用しています。現在、ポップオーバーテキストをスクロールすると、<a>のdata-content属性のテキストのみが表示されたポップオーバーが表示されます。とにかく<div>ポップオーバーの中に入れてもらえるかなと思っていました。可能性としては、そこでphpとmysqlを使用したいのですが、divを動作させることができれば、残りを理解できると思います。データコンテンツをdivIDに設定しようとしましたが、機能しませんでした。 HTML： <a class='danger' data-placement='above' rel='popover' data-content='#PopupDiv' href='#'>Click</a>

151 twitter-bootstrap  popover 

このplunkr（select2 + angulat-ui）を機能させるのに問題があります。 http://plnkr.co/edit/NkdWUO?p=preview ローカルセットアップで、select2の動作を取得しましたが、ドキュメントで説明されているように幅を設定できません。幅が狭すぎて使用できません。 ありがとうございました。 編集：そのplnkrを気にしないでください、私はここhttp://jsfiddle.net/pEFy6/で作業フィドルを見つけました 最初の要素の幅に縮小するのはselect2の動作のようです。ブートストラップをclass="input-medium"使用して幅を設定できますが、angular-uiが構成パラメーターを取得しない理由はまだわかりません。

151 css  twitter-bootstrap  angularjs  jquery-select2 

Twitterブートストラップドロップダウンメニューを実装したいのですが、これが私のコードです。 <span class="dropdown"> <a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">a</a></li> <li><a href="#">b</a></li> <li><a href="#">c</a></li> <li class="divider"></li> <li><a href="#">d</a></li> </ul> ドロップダウンは適切に機能し、ドロップダウンは画面の右端の隣に配置されます。ドロップダウントグルをクリックすると、リストが画面の外に出ます。次のような画面になります。 どうすれば修正できますか？

151 html  css  twitter-bootstrap 

私のウェブサイトに表を載せたいのですが。問題は、このテーブルに約400行あることです。テーブルの高さを制限し、それにスクロールバーを適用するにはどうすればよいですか？これは私のコードです： <div class="span3"> <h2>Achievements left</h2> <table class="table table-striped"> <thead> <tr> <th>#</th> <th>Name</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Something</td> </tr> <tr> <td>2</td> <td>Something</td> </tr> <tr> <td>3</td> <td>Something</td> </tr> <tr> <td>4</td> <td>Something</td> </tr> <tr> <td>5</td> <td>Something</td> </tr> <tr> <td>6</td> <td>Something</td> </tr> </tbody> </table> <p><a class="btn" href="#">View details »</a></p> </div> max-heightとfixed heightをテーブルに適用しようとしましたが、機能しません。

149 twitter-bootstrap 

次のマークアップを想定します。 <table class="table table-bordered" align="center"> セルの数に関係なく、テーブルの幅は常に100％です。なんで？

148 twitter-bootstrap 

Twitterブートストラップを使用しており、Googleマップを持っています。 マーカーなどのマップ上の画像が、BootstrapのCSSによって歪められています。 ブートストラップCSSには次のものがあります。 img { border: 0 none; height: auto; max-width: 100%; } max-widthFirebug を使用してプロパティを無効にすると、マーカー画像が通常どおり表示されます。Bootstrap CSSがGoogleマップの画像に影響を与えないようにするにはどうすればよいですか？

147 google-maps  twitter-bootstrap  css 

閉まっている。この質問はトピックから外れています。現在、回答を受け付けていません。 この質問を改善したいですか？ Stack Overflowのトピックとなるように質問を更新します。 7年前休業。 この質問を改善する ホストされているバージョンのTwitter Bootstrapはありますか？GoogleでホストされているjQueryのバージョンに似ているものはありますか？

144 twitter-bootstrap  cdn 

bootstrapdivを右にフロートさせる適切な方法は何ですか？pull-rightお勧めの方法だと思いましたが、うまくいきません。 @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); .container { margin-top: 10px; } <div class="container"> <div class="row-fluid"> <div class="span6"> <p>Text left</p> </div> <div class="span6 pull-right"> <p>text right</p> </div> </div> </div> コードスニペットを実行する結果を非表示スニペットを展開

142 html  css  twitter-bootstrap 

次のコードを使用して、いくつかのツールヒントを最終的に機能させることができました。 <a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a> その後 <script> $('[rel=tooltip]').tooltip(); </script> 私が遭遇している問題は、Bootstrapsの代わりにjQueryUIツールチップ（矢印なし、大きな醜いツールチップ）を使用していることです。 jQueryUIの代わりにブートストラップツールチップを使用するには、何をする必要がありますか？

141 jquery-ui  twitter-bootstrap