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

Twitterブートストラップモーダルウィンドウのアニメーションをスライドダウン効果からフェードインに変更する方法、またはスライドなしで表示する方法はありますか？私はここのドキュメントを読みました： http://getbootstrap.com/javascript/#modals ただし、モーダルボディのスライド効果を変更するためのオプションについては触れられていません。

167 javascript  jquery  jquery-ui  twitter-bootstrap 

Bootstrapアコーディオンでは、aテキストをクリックする代わりに、panel-headingdivのどこかをクリックすると折りたたむようにします。 私はBootstrap 3を使用しています。したがって、アコーディオンの代わりに、それは単に折りたたみ可能なパネルです。パネル全体をクリッカブルにする方法はありますか？

167 twitter-bootstrap  twitter-bootstrap-3 

私は次の要素を持っています： <div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" > <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title"></h3> </div> <div class="modal-body"></div> <div class="modal-footer"></div> </div> </div> </div> モーダルダイアログは次のように表示されます。基本的に、スクロールバーが全体に表示され、表示しようとしているコンテンツが含まれてmodal-dialogいませんmodal-body。 画像は次のようになります。 スクロールバーmodal-bodyだけを取得するにはどうすればよいですか？ に割り当てようとstyle="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"しましたmodal-bodyが、うまくいきませんでした。

164 css  twitter-bootstrap 

フォームのみが存在するページがあり、フォームを画面の中央に配置したい。 <div class="container"> <div class="row justify-content-center align-items-center"> <form> <div class="form-group"> <label for="formGroupExampleInput">Example label</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"> </div> <div class="form-group"> <label for="formGroupExampleInput2">Another label</label> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"> </div> </form> </div> </div> justify-content-center水平方向のフォームを揃えたが、私は垂直に整列する方法を見つけ出すことはできません。私が使用しようとしましたalign-items-centerとalign-self-center、それは動作しません。 何が欠けていますか？ デモ

163 css  twitter-bootstrap  bootstrap-4  centering 

私はTwitter-Bootstrapを使用しており、ブラウザでの表示と同じようにページを印刷できるようにする必要があります。Twitter-Bootstrapで作成された他のページは問題なく印刷できますが、純粋にTwitter-Bootstrapを使用しているページを印刷できないようです。どこかにタグがありませんか？ 印刷時の公式TBページ： 印刷時の私のページ： 私のページが実際にどのように見えるか：

162 printing  twitter-bootstrap 

Twitterのブートストラップを使用して垂直方向の空白を追加する最良の方法は何ですか？ たとえば、ランディングページを作成していて、特定のボタンの上下に少し（100px）の空白スペースが必要だとします。明らかに、その特定のボタンに対して特定のクラスを作成することができます。しかし、Bootstrapには縦の空白を追加するDRYの方法が必要だと思います。

162 twitter-bootstrap  whitespace  vertical-alignment  twitter-bootstrap-2 

Twitter Bootstrapを使用してツールチップを作成しました。 ツールチップは3行で表示されます。ただし、ツールチップを1行だけで表示したいと思います。 ツールチップの幅を変更するにはどうすればよいですか？これはTwitterブートストラップまたはツールチップ自体に固有のものですか？

162 twitter-bootstrap  tooltip 

休業。この質問は意見に基づいています。現在、回答を受け付けていません。 この質問を改善してみませんか？この投稿を編集して、事実と引用で回答できるように質問を更新してください。 5年前休業。 この質問を改善する 最近Flexbox、divを同じ高さにするためのソリューションを探していたときに、最高のものに依存することを発見しました。 CSS-tricks.com の次のページを読んだところ、flexbox学習と使用が非常に強力なモジュールであると確信しました。ただし、Twitterブートストラップ（および類似のフレームワーク）がグリッドシステムと同じような機能（もちろん、さらに多くの機能）を提供しているという事実についても考えさせられました。 さて、質問は次のとおりflexboxです。の長所と短所は何ですか？Flexboxでできない、Bootstrapのようなフレームワークでできることはありますか（もちろん、純粋にグリッドシステムについて話しています）。ウェブサイトに実装するとどちらが速いですか？ グリッドシステムだけの場合flexbox、純粋にを使用する方が賢明だと思いますが、すでにフレームワークを使用している場合、何かflexbox追加できるものはありますか？ flexboxフレームワークよりも「グリッドシステム」を選択する理由はありますか？

161 html  css  twitter-bootstrap  flexbox 

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-body"> <%= image_tag "Background.jpg" %> </div> </div> 上記のコードのTwitterブートストラップモーダルポップアップを全画面表示にするにはどうすればよいですか。CSSをいじってみましたが、思い通りにできませんでした。誰かが私を助けてくれますか？

160 css  twitter-bootstrap 

Twitterのブートストラップは、Glyphiconsによるアイコンを使用しています。available in dark gray and whiteデフォルトでは " "です。 いくつかのCSSトリックを使用してアイコンの色を変更することは可能ですか？各色にアイコン画像を設定する必要がなくなる他のcss3の輝きを期待していました。 囲んでいる（<i>）要素の背景色を変更できることは知っていますが、アイコンの前景色について話しています。アイコン画像の透明度を逆にして、背景色を設定することは可能だと思います。 では、CSSのみを使用してブートストラップアイコンに色を追加できますか？

159 css  twitter-bootstrap  sprite  css-sprites 

Bootstrapで次のグリッドを実行する方法を理解しようとしています。 2つの行にまたがるボックス（1番）をどのように作成するかわかりません。ボックスは、配置された順序でプログラムによって生成されます。ボックス1はウェルカムメッセージです。 これに行くための最良の方法についてのアイデアはありますか？

158 css  twitter-bootstrap 

現在、以下の関数を使用して、Bootstrapのツールチッププラグインを使用して表示されるテキストを作成しています。マルチラインツールチップが機能するの<br>は\nどうしてですか？リンクのタイトル属性にHTMLを含めないようにしています。 機能するもの def tooltip(object) tooltip = "" object.each do |user| tooltip += "#{user.identifier}" + "<br>" end return tooltip end 私が欲しいもの def tooltip(object) tooltip = "" object.each do |user| tooltip += "#{user.identifier}" + "\n" end return tooltip end

157 javascript  html  css  twitter-bootstrap 

私は、Bootstrap 3のタブjqueryプラグインを使用して、左揃えのスタックされたタブを実装しようとしています。この場合、タブは上ではなく、タブコンテンツの左に垂直にレンダリングされます。次のことを試してみると、 <ul class="nav nav-tabs nav-stacked"> <li><a href="#tab1" data-toggle="tab">Tab 1</a></li> <li><a href="#tab2" data-toggle="tab">Tab 2</a></li> <li><a href="#tab3" data-toggle="tab">Tab 3</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade" id="tab1"> Tab 1 content </div> <div class="tab-pane fade" id="tab2"> Tab 2 content </div> <div class="tab-pane fade" id="tab3"> Tab 3 content </div> </div> タブは互いの上に積み重ねられますが、左に回されたときに適切にレンダリングされず、代わりにそれらは互いの上にスタックされた単なる水平タブです。コンテンツのdivでタブのコンテンツが適切に表示/非表示になります。 これは、Bootstrap 2.xでtab-leftおよびtab-rightクラスを使用して処理されていましたが、Bootstrap 3では非推奨であり、実際には何も置き換えられていないようです。Bootstrap …

157 twitter-bootstrap  tabs  twitter-bootstrap-3 

ブートストラップボタンを水平に配置する最良の方法は何ですか？ 現時点ではボタンが触れています： <div class="btn-group"> <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"> <i class="icon-in-button"></i> Add to list <span class="caret"/> </button> <ul class="dropdown-menu"> <li> <a href="#">here</a> </li> <li> <a href="#">new</a> </li> </ul> <button class="btn btn-info"> <i class="icon-in-button"></i> more </button> </div> 問題を示すjsfiddle：http ://jsfiddle.net/hhimanshu/sYLRq/4/

157 html  css  twitter-bootstrap 

Bootstrap 3のモーダル機能を使用して、YouTubeビデオを表示しようとしています。動作しますが、YouTube動画のボタンをクリックできません。 これについて何か助けがありますか？ これが私のコードです： <div id="link">My video</div> <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe> </div> </div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script> <script src="js/bootstrap.min.js"></script> <script> $('#link').click(function () { …

157 jquery  css  twitter-bootstrap  youtube  twitter-bootstrap-3