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

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

30
Twitter Bootstrap 3を使用して列を中央に配置する
Twitter Bootstrap 3でコンテナー（12列）内の1列サイズのdivを中央揃えするにはどうすればよいですか？ .centered { background-color: red; } <body class="container"> <div class="col-lg-1 col-offset-6 centered"> <img data-src="holder.js/100x100" alt="" /> </div> </body> コードスニペットを実行する結果を非表示スニペットを展開 divクラス.centeredがコンテナ内の中央に配置されるようにしたい。複数divのがある場合は行を使用できますが、今のところdiv、コンテナー内で中央に配置される1列のサイズ（12列）が必要です。 またdiv、半分を相殺しないことを意図しているため、上記のアプローチで十分かどうかもわかりません。外の空きスペースdivとdiv縮小の内容は比例して必要ありません。divの外側のスペースを空にして均等に分散させたいです（コンテナーの幅が1列になるまで縮小します）。
30
ブートストラップ列をすべて同じ高さにするにはどうすればよいですか？
ブートストラップを使用しています。3つの列をすべて同じ高さにするにはどうすればよいですか？ これが問題のスクリーンショットです。青と赤の列を黄色の列と同じ高さにしたいと思います。 これがコードです： <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-xs-4 panel" style="background-color: red"> some content </div> <div class="col-xs-4 panel" style="background-color: yellow"> catz <img width="100" height="100" src="https://lorempixel.com/100/100/cats/"> </div> <div class="col-xs-4 panel" style="background-color: blue"> some more content </div> </div> </div> コードスニペットを実行する結果を非表示スニペットを展開
23
Bootstrap 3と垂直に整列
私はTwitter Bootstrap 3を使用しています。divたとえば、垂直方向に2つ揃えたい場合、JSFiddleリンクに問題があります。 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div class="row"> <div class="col-xs-5"> <div style="height:5em;border:1px solid #000">Big</div> </div> <div class="col-xs-5"> <div style="height:3em;border:1px solid #F00">Small</div> </div> </div> コードスニペットを実行する結果を非表示スニペットを展開 Bootstrapのグリッドシステムではfloat: left、ではなくを使用しているdisplay:inline-blockため、このプロパティvertical-alignは機能しません。私はmargin-topそれを修正するためにを使ってみましたが、これはレスポンシブデザインの良い解決策ではないと思います。
14
jQueryを使用してブートストラップモーダルウィンドウを開く方法
Twitter Bootstrapのモーダルウィンドウ機能を使用しています。誰かが私のフォームの送信をクリックしたときに、フォームの「送信ボタン」をクリックするとモーダルウィンドウが表示されます。 <form id="myform" class="form-wizard"> <h2 class="form-wizard-heading">BootStap Wizard Form</h2> <input type="text" value=""/> <input type="submit"/> </form> <!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> …
6
Bootstrap 3のsr-onlyとは何ですか？
sr-only使用するクラスは何ですか？重要ですか、それとも削除できますか？なしで正常に動作します。 これが私の例です： <div class="btn-group"> <button type="button" class="btn btn-info btn-md">Departments</button> <button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Sales</a></li> <li><a href="#">Technical</a></li> <li class="divider"></li> <li><a href="#">Show all</a></li> </ul> </div>
20
テーブル内のテキスト整列クラス
TwitterのBootstrapフレームワークには、テキストを揃える一連のクラスがありますか？ たとえば$、右に揃えたい合計のあるテーブルがあります... <th class="align-right">Total</th> そして <td class="align-right">$1,000,000.00</td>
30
背景の下に表示されるブートストラップモーダル
私はブートストラップの例から直接モーダルのコードを使用し、bootstrap.jsのみを含めました（bootstrap-modal.jsは含めません）。ただし、私のモーダルは灰色のフェード（背景）の下に表示され、編集できません。 これは次のようになります。 この問題を再現する1つの方法については、このフィドルを参照してください。そのコードの基本的な構造は次のとおりです。 <body> <p>Lorem ipsum dolor sit amet.</p> <div class="my-module"> This container contains the modal code. <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body">Modal</div> </div> </div> </div> </div> </body> body { padding-top: 50px; } .my-module { position: fixed; top: 0; left: 0; } これがなぜであるか、またはこれを修正するために私が何ができるかという考えはありますか？
26
Twitterブートストラップフォームファイル要素のアップロードボタン
Twitterブートストラップ用の豪華なファイル要素のアップロードボタンがないのはなぜですか？青いプライマリボタンがアップロードボタンに実装されていると便利です。CSSを使用してアップロードボタンを調整することもできますか？（操作できないネイティブブラウザ要素のようです）
23
Twitter Bootstrapを使用して中央揃えのコンテンツを取得するにはどうすればよいですか？
私は非常に基本的な例に従っています。スターターページとグリッドシステムを使用して、次のことを期待していました。 <div class="row"> <div class="span12"> <h1>Bootstrap starter template</h1> <p>Example text.</p> </div> </div> コードスニペットを実行する結果を非表示スニペットを展開 ...中央揃えのテキストを生成します。 ただし、それでも左端に表示されます。何が悪いのですか？
18
Twitter Bootstrapモーダルウィンドウが閉じないようにする
Twitterブートストラップを使用してモーダルウィンドウを作成しています。デフォルトの動作では、モーダル領域の外側をクリックすると、モーダルは自動的に閉じます。これを無効にしたいのですが、モーダルの外側をクリックしたときにモーダルウィンドウを閉じないでください。 これを行うために誰かがjQueryコードを共有できますか？
11
関数をTwitter Bootstrap Modalにバインドする
私は新しいプロジェクトでTwitter Bootstrap libを使用していて、ページの一部で最新のjsonデータをモーダルクローズで更新して取得したいと考えています。ドキュメンテーションのどこにもこれが見当たらないので、誰かが私に指摘したり、解決策を提案したりできます。 文書化された方法の使用に関する2つの問題 $('#my-modal').bind('hide', function () { // do something ... }); モーダルに「非表示」クラスをすでにアタッチしているため、ページのロード時に表示されず、2回ロードされます。 非表示クラスを削除して要素IDをに設定し、上記の関数にdisplay:none追加console.log("THE MODAL CLOSED");しても、閉じると何も起こりません。
10
ブートストラップモーダルにデータを渡す
それぞれにIDが付けられたハイパーリンクがいくつかあります。このリンクをクリックすると、モーダル（http://twitter.github.com/bootstrap/javascript.html#modals）を開き、このIDをモーダルに渡します。googleで検索しましたが、自分に役立つ情報が見つかりませんでした。 これはコードです： <a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a> 開く必要があります： <div class="modal hide" id="addBookDialog"> <div class="modal-body"> <input type="hidden" name="bookId" id="bookId" value=""/> </div> </div> このコードを使用して： $(document).ready(function () { $(".open-AddBookDialog").click(function () { $('#bookId').val($(this).data('id')); $('#addBookDialog').modal('show'); }); }); しかし、ハイパーリンクをクリックしても何も起こりません。ハイパーリンクを指定する<a href="#addBookDialog" ...>と、モーダルは正常に開きますが、データが含まれていません。 私はこの例に従いました：Bootstrapでmodal.show（）関数に値の引数を渡す方法 （そして私もこれを試しました：モーダルダイアログで入力値を設定する方法？）
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.