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

Bootstrapは、Webアプリおよびサイトの開発を開始するために設計されたフロントエンドフレームワークです。Bootstrapのバージョンに関連する質問については、「twitter-bootstrap-2」、「twitter-bootstrap-3」、「bootstrap-4」タグから特定のバージョンのタグも使用してください。

7
クリック時にブートストラップドロップダウンを開いたままにします
ブートストラップドロップダウンをショッピングカートとして使用します。ショッピングカートには、「製品の削除」ボタン（リンク）があります。クリックすると、ショッピングカートスクリプトで商品が削除されますが、メニューが消えてしまいます。とにかくこれを防ぐ方法はありますか？e.startPropagationを試しましたが、うまくいかなかったようです。 <div id="shoppingcart" class="nav-collapse cart-collapse"> <ul class="nav pull-right"> <li class="dropdown open"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Totaal: € 43,00</a> <ul class="dropdown-menu"> <li class="nav-header">Pakketten</li> <li> <span class="quantity">1x</span> <span class="product-name">Test Product </span> <span class="product-remove"><a class="removefromcart" packageid="4" href="#">x</a> </span></li> <li><a href="#">Total: € 43,00</a></li> <li><a href="/checkout">Checkout</a></li> </ul> </li> </ul> ご覧のとおり、class = "dropwdown-toggle"の要素がドロップダウンになりました。もう1つのアイデアは、プログラムでクリックして再度開くというものでした。したがって、誰かがプログラムでBootstrapドロップダウンを開く方法を説明できれば、それはうまくいくでしょう！
6
ブートストラップ-ボタンをカードの下部に揃えます
card-deckとcardクラスを使用するブートストラップの例の1つを覗いていました（価格設定の例）。リストの1つに他のリストよりもアイテムが少ない場合、ボタンの配置を修正するにはどうすればよいのでしょうか。 すべてのボタンを（各カードの下部に）垂直に配置したいのですが、これを行う方法がわかりませんでした。.align-bottomクラスを設定し、ボタンをでラップしてみました<div class="align-text-bottom">。また、スペースの追加に関するこの質問からのいくつかの提案を試しましたが、それでも成功しません（また、リストの残りのスペースを埋めるように間隔を可変にする必要があります）。 折り返す<div class="card-footer bg-white">と、カードの下部にあるボタンが整列せず、その周りに何らかの境界線が作成されるため、目的の結果が得られませんでした。 誰かアイデアがありますか？ 編集：これは問題に似たjsfiddleです。
6
Bootstrap 3のグリッドクラス（col-sm-＃およびcol-lg-＃）を理解する
Bootstrap 3を使い始めましたが、グリッドクラスの使用方法を理解するのに問題があります。 これが私がこれまでに理解したことです： クラスcol-sm-#とはcol-lg-#昔ながらのものとは異なるようですcol-#画面が特定のサイズ（それぞれ768pxと992px）を超えている場合にのみ適用されるというようです。-sm-または-lg-を省略すると、divが1つの列に折りたたまれることはありません。 ただし、行内に2つのdivを作成すると、両方ともウィンドウの幅が768px〜992pxの場合にのみ並んでcol-sm-6いるように見えます。つまり、ウィンドウを完全に縮小してからゆっくりと拡大すると、レイアウトは1列、次に2列、そして再び1列に戻ります。 これは意図された動作ですか？ 768pxを超えるものに2つの列が必要な場合、両方のクラスを適用する必要がありますか？（<div class="col-sm-6 col-lg-6">） col-6 また含める必要がありますか？<div class="col-6 col-sm-6 col-lg-6">
7
ブートストラップテーブルの列をコンテンツに適合させる
Bootstrapを使用して、テーブルを描画しています。右端の列にはボタンがあり、そのボタンに合うように必要な最小サイズにドロップダウンしたいと思います。 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <table class="table table-responsive"> <tbody> <tr> <th>Name</th> <th>Payment Method</th> <th></th> </tr> <tr> <td>Bart Foo</td> <td>Visa</td> <td><a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a></td> </tr> </tbody> </table> コードスニペットを実行する結果を非表示スニペットを展開 これは次のようにレンダリングされます。 いくつかのFirebugが強調表示されているため、列の幅は次のように広くなっています。 その列はページに合わせて拡大縮小されますが、ページはより大きな動的幅モードになっています。純粋なCSSでこれを修正する方法はある程度わかっていますが、これらのアプローチのほとんどは、サイトの低幅バージョンで問題を引き起こす可能性があります。 その列をその内容の幅までドロップダウンするにはどうすればよいですか？ （相変わらず-既存のブートストラップクラス>純粋なCSS> Javascript）
8
Bootstrap3.0ポップオーバーとツールチップ
Bootstrapを初めて使用しますが、ポップオーバーとツールチップの機能を動作させるのに問題があります。ドロップダウンとモデルに問題はありませんでしたが、ポップオーバーとツールチップに何かが欠けているようです。 ツールチップが表示されますが、ブートストラップの例のようにスタイルや場所が設定されていません。そして、ポップオーバーはまったく機能していません。 見て、私が欠けているものを教えてください。 <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" media="screen"> <link href="css/font-awesome.min.css" rel="stylesheet" media="screen"> <link href="css/index.css" rel="stylesheet" media="screen"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE …
9
Bootstrap2でdivを中央に配置する方法は？
http://twitter.github.com/bootstrap/scaffolding.html 私はすべての組み合わせのように試しました： <div class="row"> <div class="span7 offset5"> box </div> </div> または <div class="container"> <div class="row"> <div class="span7 offset5"> box </div> </div> </div> 変更されたスパンとオフセット番号.. しかし、ページの中央に完全に配置された単純なボックスを取得することはできません:( 中央に6列幅のボックスが欲しいだけです... 編集： でやった <div class="container"> <div class="row" id="login-container"> <div class="span8 offset2"> box </div> </div> </div> しかし、ボックスが広すぎるので、span7でそれを行う方法はありますか？ span7 offset2左側にspan7 offset3余分なパディングを与え、右側に余分なパディングを与えます。
16
jQuery検証通知にTwitterBootstrapポップオーバーを使用する方法は？
ブートストラップを使用してポップオーバーを簡単に表示できます。また、標準のjQuery検証プラグインまたはjQuery検証エンジンを使用して検証を行うこともできますが、一方を他方にフィー​​ドする方法がわかりません。 必要なのは、通知を表示したいときにバリデーターによって呼び出されるフックであり、メッセージとターゲット要素をポップオーバーに渡すクロージャーを与えることだと思います。これは一種の依存性注入のようです。 理論的にはすべて素晴らしいですが、そのフックがどこにあるのか、またはいずれかの検証エンジンにフックが存在する場合でも、私にはわかりません。どちらも、エラータイプ（必ずしもメッセージテキストは必要ありません）とそれに関連する要素だけが必要な場合に、配置、ラッパー、スタイルに関するあらゆる種類の精巧なオプションを使用して通知を表示する責任を負うことを意図しているようです。に。個々の通知ではなく、フォーム全体のフックを見つけました。 動的に作成されたフォームとうまく連携するため、クラスを使用してルールを定義する検証システムの方がはるかに好きです。 誰かが解決策やより良いアイデアを持っていますか？
10
Twitterブートストラップスクロール可能モーダル
作業中のプロジェクトにTwitterブートストラップを使用しています。 やや長いフォームのモーダルウィンドウがありますが、ウィンドウが小さくなりすぎたときにモーダルがスクロールしませんでした（スクロールできないページから消えた場合）。 これを修正するために、私は次のcssを使用しました .modal { overflow-y:auto; max-height:90%; margin-top:-45%; } これは、Chromeでの希望どおりに機能します（つまり、ウィンドウが十分に大きい場合、フォームはフルサイズですが、ウィンドウが縮小すると、モーダルが縮小してスクロール可能になります）。問題は、IEではモーダルが画面外にあることです。誰かがこの問題に対するより良い解決策を持っていますか？ 私の例はtinyhousemap.comにあります（モーダルを表示するには、ナビゲーションウィンドウの[マップにエントリを追加]をクリックします） ありがとう
27
ブートストラップモーダル：現在を閉じ、新しく開く
私はしばらく探しましたが、これに対する解決策を見つけることができません。私は以下が欲しい： Bootstrapモーダル内のURLを開きます。私はこれをコース外で行っています。したがって、コンテンツは動的にロードされます。 ユーザーがこのモーダル内のボタンを押すと、現在のモーダルを非表示にし、その直後に、ユーザーがクリックした新しいURLで新しいモーダルを開きます。2番目のモーダルのこのコンテンツも動的にロードされます。 その後、ユーザーがその2番目のモーダルを閉じると、最初のモーダルが再び戻る必要があります。 私はこれを何日も見つめています、誰かが私を助けてくれることを願っています。 前もって感謝します。
4
シンプルなブートストラップページがiPhoneで応答しない
Twitter Bootstrapの例をダウンロードし、それを使用して簡単なRailsプロジェクトを作成しました。必要に応じてcssをコピーしましたが、正常に表示されます。また、jsをコピーしたところ、デスクトップですべてがうまく機能しました。ブラウザのサイズを変更すると、ページが再編成されます。さまざまなサイズの「レスポンシブデザインテストツール」を使用すると、うまく機能します。 私が抱えている問題は私のiPhoneにあります：それは私のデスクトップと同じように表示されます。 Bootstrap Hero Exampleページ（私が始めたページ）を試してみると、iPhoneでうまく機能します。 何がうまくいかない可能性がありますか？CSSにはほとんど触れていませんが、フッターにパディングを追加しただけです。 参考までに、変更したCSSは、アプリをapplication.css次のコンテンツにリンクしていることです。 /* Application stylesheet */ @import url(bootstrap.css); @import url(bootstrap-responsive.css); /* Body */ body { padding-top: 60px; padding-bottom: 40px; } /* Footer */ footer { padding: 20px 0; }
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.