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

上部の固定ナビゲーションバーでレスポンシブレイアウトを作成しています。その下には、サイドバー（3）とコンテンツ（9）の2つの列があります。デスクトップではこれは次のようになります ナビゲーションバー [3] [9] 私はときにresize、モバイルにnavbar圧縮され、隠されている、そしてサイドバーはこのように、コンテンツの上に積層されています： ナビゲーションバー [3] [9] メインコンテンツを一番上に配置したいので、モバイルでの順序を次のように変更する必要があります。 ナビゲーションバー [9] [3] 同じ点をカバーするこの記事を見つけましたが、受け入れられた回答は、ソリューションがBootstrapの現在のバージョンには適用されないと言って編集されています。 モバイルでこれらの列を並べ替えるにはどうすればよいですか？または、代わりに、sidbarリストグループを拡張ナビゲートにどのように取り込むことができますか？ これが私のコードです： <div class="navbar navbar-inverse navbar-static-top"> <div class="container"> <a href="#" class="navbar-brand">Brand Title</a> <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav navbar-right"><!--original navbar--> <li class="active"><a href="#">Home</a></li> <li><a href="#">FAQ</a></li> …

293 html  css  twitter-bootstrap  multiple-columns 

モーダルと同じように、ポップオーバーを非表示にできますか？ユーザーがそれらの外のどこかをクリックしたときにそれらを閉じますか？ 残念ながら、ポップオーバーの代わりに実際のモーダルを使用することはできません。これは、モーダルがposition：fixedを意味し、もはやポップオーバーではなくなるためです。:(

289 twitter-bootstrap  popover 

Bootstrap v3では、多くの場合、hidden-**クラスをclearfixと組み合わせて使用​​して、さまざまな画面幅で複数列のレイアウトを制御します。例えば、 複数のhidden-**を1つのDIVに組み合わせて、複数の列が異なる画面幅で正しく表示されるようにすることができます。 例として、製品の写真の行を、大きな画面サイズでは1行に4つ、小さな画面では3つ、非常に小さな画面では2つ表示したいとします。製品の写真は高さが異なる場合があるため、行が適切に分割されるようにするには、clearfixが必要です。 これはv3の例です... http://jsbin.com/tosebayode/edit?html,css,output v4はこれらのクラスを廃止し、visible / hidden-**-up / downクラスに置き換えたので、代わりに複数のDIVを使用して同じことを行う必要があるようです。 これはv4での同様の例です... http://jsbin.com/sagowihowa/edit?html,css,output したがって、私は単一のDIVから、同じことを達成するために多くのアップ/ダウンクラスを持つ複数のDIVを追加する必要があるまで行ってきました。 から... <div class="clearfix visible-xs-block visible-sm-block"></div> に... <div class="clearfix hidden-sm-up"></div> <div class="clearfix hidden-md-up hidden-xs-down"></div> <div class="clearfix hidden-md-down"></div> 私が見落としたv4でこれを行うより良い方法はありますか？

289 twitter-bootstrap  bootstrap-4 

ブートストラップポップオーバー内にHTMLを表示しようとしていますが、どういうわけか機能しません。ここでいくつかの回答を見つけましたが、うまくいきません。私が何か間違ったことをしている場合はお知らせください。 <script> $(function(){ $('[rel=popover]').popover({ html : true, content: function() { return $('#popover_content_wrapper').html(); } }); }); </script> <li href="#" id="example" rel="popover" data-content="" data-original-title="A Title"> popover </li> <div id="popover_content_wrapper" style="display: none"> <div>This is your div content</div> </div>

288 html  twitter-bootstrap  popover 

休業。この質問は意見に基づいています。現在、回答を受け付けていません。 この質問を改善してみませんか？この投稿を編集して、事実と引用で回答できるように質問を更新してください。 6年前休業。 この質問を改善する 私はLESSを使用してBootstrap 2.0.3で作業しています。大幅にカスタマイズしたいのですが、ライブラリへの変更は頻繁に行われるため、可能な限りソースを変更しないようにしたいと考えています。私はLESSを初めて使用するので、コンパイルが完全にどのように機能するかわかりません。LESSまたはLESSベースのフレームワークを使用するためのベストプラクティスは何ですか？

285 twitter-bootstrap  less 

メインの親の内側に垂直方向または水平方向にHTML要素を中央揃えにする方法はありますか？

285 css  twitter-bootstrap 

data-toggleTwitter Bootstrapで属性は何をしますか？Bootstrap APIで回答が見つかりませんでした。 私も以前に同様の質問を見ました、リンク。しかし、それは私にはあまり役に立ちませんでした。

284 javascript  jquery  html  twitter-bootstrap 

データベース行に関連付けられた行のHTMLテーブルがあります。各行に「行の削除」リンクが欲しいのですが、事前にユーザーに確認したいと思います。 Twitter Bootstrapモーダルダイアログを使用してこれを行う方法はありますか？

284 jquery  twitter-bootstrap 

私はここの投稿、Bootstrapサイト、そして狂ったようにグーグルを読んだ-しかし、簡単な答えであると確信しているものが見つからない... このようなlink_toヘルパーから開くBootstrapモーダルがあります。 <%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal", class: "btn btn-primary"} %> 私のContactsController.createアクションでは、作成してContactに渡すコードがありますcreate.js.erb。ではcreate.js.erb、いくつかのエラー処理コード（rubyとjavascriptの混合）があります。すべてがうまくいけば、モーダルを閉じたい。 ここで問題が発生します。すべてがうまくいくと、モーダルを却下できないようです。 私が試しましたが$('#myModal').modal('hide');、これは効果がありません。私も試してみまし$('#myModal').hide();たが、モーダルは却下されますが、背景は残ります。 モーダルを閉じる方法、および/または内部から背景を閉じる方法に関するガイダンスはありますcreate.js.erbか？ 編集する myModalのマークアップは次のとおりです。 <div class="modal hide" id="myModal" > <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Add Contact</h3> <div id="errors_notification"> </div> </div> <div class="modal-body"> <%= form_for :contact, url: contacts_path, remote: true …

281 javascript  twitter-bootstrap  modal-dialog 

私はそれをドロップダウンに入力するためにajax呼び出しを行うtwitterブートストラップtypeahead要素の実用的な例を見つけようとしています。 私は既存のjqueryオートコンプリートの作業例を持っていますが、これはajax urlを定義し、返信を処理する方法を定義しています <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { var options = { minChars:3, max:20 }; $("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result( function(event, data, formatted) { window.location = "./runner/index/id/"+data[1]; } ); .. これを先行入力の例に変換するには、何を変更する必要がありますか？ <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { var options = { source:'/index/runnerfilter/format/html', items:5 }; $("#runnerquery").typeahead(options).result( function(event, data, formatted) { window.location = "./runner/index/id/"+data[1]; } ); .. …

280 jquery  twitter-bootstrap  jquery-autocomplete  jquery-ui-autocomplete  typeahead.js 

次のようなJavaScriptでTwitterブートストラップツールチップを使用しています。 $('a[rel=tooltip]').tooltip(); 私のマークアップは次のようになります： <a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a> これは正常に機能しますが、<a>要素を動的に追加し、それらの動的要素のツールチップが表示されません。ドキュメントが典型的なjquery $(document).ready(function()機能でロードされたときに一度だけ.tooltip（）をバインドするためです。 これを動的に作成された要素にバインドするにはどうすればよいですか？通常、私はjquery live（）メソッドを介してこれを行います。しかし、バインドに使用するイベントは何ですか？ブートストラップ.tooltip（）をjquery .live（）に接続する方法がわからないだけです。 この作業を行う1つの方法は次のようなものです。 /* Add new 'rows' when plus sign is clicked */ $("a.add").live('click', function () { var clicked_li = $(this).parent('li'); var clone = clicked_li.clone(); clone.find(':input').each(function() { $(this).val(''); }); clicked_li.after(clone); $('a[rel=tooltip]').tooltip(); }); これは機能しますが、一種のハックのようです。また、$（ready）呼び出しでまったく同じ.tooltip（）行を呼び出しています。では、ページが最初に読み込まれてセレクターに一致するときに存在する要素は、ツールチップで2回表示されるのでしょうか。 私はこのアプローチで何の問題も見ていません。私は、行動のベストプラクティスまたは理解を求めています。

277 jquery  twitter-bootstrap 

列の幅いっぱいにボタンを配置したいのですが、問題があります... <div class="span9 btn-block"> <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button> </div> ボタンを列と同じ幅にするにはどうすればよいですか？

276 css  twitter-bootstrap  html  responsive-design 

node_modulesHTML Webサイトに組み込むためのベストプラクティスについて質問があります。 node_modulesフォルダー内にBootstrapがあるとします。Webサイトの製品版では、node_modulesフォルダー内にあるBootstrapスクリプトとCSSファイルをどのように含めるのですか？Bootstrapをそのフォルダー内に残して、次のようなことをするのは理にかなっていますか？ <script src="./node_modules/bootstrap/dist/bootstrap.min.js"></script> または、私のgulpファイルにルールを追加して、それらのファイルをdistフォルダーにコピーする必要がありますか？それとも、どうにかしてHTMLファイルからローカルブートストラップを完全に削除してCDNバージョンに置き換えるのが最善でしょうか。

275 node.js  twitter-bootstrap  npm  node-modules 

これは2つの部分からなる質問です。 モーダルの正確な高さがわからないときに、モーダルを垂直に中央に配置するにはどうすればよいですか？ モーダルを中央に配置し、モーダル本体にoverflow：autoを含めることは可能ですか？ただし、モーダルが画面の高さを超えている場合のみですか？ 私はこれを使ってみました： .modal-dialog { height: 80% !important; padding-top:10%; } .modal-content { height: 100% !important; overflow:visible; } .modal-body { height: 80%; overflow: auto; } これにより、コンテンツが垂直画面サイズよりもはるかに大きい場合に必要な結果が得られますが、小さなモーダルコンテンツの場合は、ほとんど使用できません。

270 css  twitter-bootstrap  modal-dialog  center 

ブートストラップのdivコンテナー内で一部のテキストを左揃えにし、その他のテキストを右揃えする一般的な方法は何ですか？ 例えば Total cost $42 合計費用より上は左揃えのテキストで、42ドルは右揃えのテキストです

268 twitter-bootstrap  user-interface  bootstrap-4