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

Bootstrap 3はフロントエンドフレームワークの第3世代であり、魅力的なルックアンドフィールでスピーディなWeb開発を可能にします。[twitter-bootstrap]タグと一緒に使用します

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列になるまで縮小します）。
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それを修正するためにを使ってみましたが、これはレスポンシブデザインの良い解決策ではないと思います。
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>
8
コンテナー流体と.container
3.1をダウンロードしてドキュメントで見つけました... 最も外側の.containerをに変更して、固定幅グリッドレイアウトを全幅レイアウトに変更します.container-fluid。 を見るとbootstrap.css、と.container-fluid同じであるように見えます.container。両方とも同じCSSを持ち、のすべてのインスタンスは.container-fluidとペアになって.containerおり、すべての列クラスはパーセンテージで指定されています。 例をいじるとき、すべてが流動的であるように見えたので、違いはわかりませんでした。 私はBootstrapを初めて使用するので、何か不足していると思います。誰かが少し時間をかけて私を啓発できますか？
17
Twitterブートストラップボタンを右揃えにするにはどうすればよいですか？
ここに簡単なデモがあります： http://jsfiddle.net/HdeZ3/1/ <ul> <li>One <input class="btn pull-right" value="test"></li> <li>Two <input class="btn pull-right" value="test2"></li> </ul> 順不同のリストがあり、リストアイテムごとに、左側にテキストを配置し、次に右揃えのボタンを配置します。私はプルライトを使用しようとしましたが、これは完全に整列を台無しにします。何が悪いのですか？
5
ブートストラップの「col-md-4」、「col-xs-1」、「col-lg-2」の数字の意味
新しいBootstrapのグリッドシステム、特に次のクラスと混同しています。 col-lg-* col-md-* col-xs-* （*はある数を表します）。 誰かが以下を説明できますか？ その数はグリッドをどのように揃えていますか？ これらの数字の使い方は？ 彼らが実際に何を表していますか？
29
Bootstrap 3 Navbarとロゴ
Bootstrap 3のデフォルトのナビゲーションバーを、テキストのブランド設定ではなく、イメージのロゴとともに使用したい。さまざまな画面サイズで問題を引き起こさずにこれを行う適切な方法は何ですか？これは一般的な要件だと思いますが、良いコードサンプルはまだ見ていません。すべての画面サイズで適切な表示ができること以外の重要な要件は、小さい画面でのメニューの折りたたみ性です。 navbar-brandクラスが含まれるAタグ内にIMGタグを挿入するだけで、メニューがAndroidフォンで正しく機能しなくなりました。また、navbarクラスの高さを上げてみましたが、それによってさらに混乱しました。 ちなみに、私のロゴ画像は、ナビゲーションバーの高さよりも大きくなっています。
30
Twitterブートストラップの5つの等しい列
作成しているページに5つの同じ列を配置したいのですが、5列グリッドがどのように使用されているのか理解できません。http：//web.archive.org/web/20120416024539/http： // domain7 .com / mobile / tools / bootstrap / sensitive 5列グリッドは、Twitterブートストラップフレームワークの一部の上に示されていますか？
19
クラス属性を条件付きで適用するReact Js
次のような親コンポーネントから渡される内容に応じて、このボタングループを条件付きで表示および非表示にしたいと思います。 <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on data } .... var TopicNav = React.createClass({ render: function() { return ( <div className="row"> <div className="col-lg-6"> <div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}"> <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Bulk Actions <span …
10
Bootstrapでコンテナーを垂直方向に中央揃えするにはどうすればよいですか？
containerdivをの内部で垂直方向に中央揃えしjumbotron、ページの中央に設定する方法を探しています。 .jumbotronスクリーンの完全な高さと幅に適合しなければなりません。.containerdivが幅を持っている1025pxし、ページ（縦中央）の真ん中にする必要があります。 このページでは、ジャンボトロンの垂直方向の中央にコンテナーを配置するとともに、ジャンボトロンを画面の高さと幅に適合させます。どうすればそれを達成できますか？ .jumbotron { height:100%; width:100%; } .container { width:1025px; } .jumbotron .container { max-width: 100%; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="jumbotron"> <div class="container text-center"> <h1>The easiest and powerful way</h1> <div class="row"> <div class="col-md-7"> <div class="top-bg"></div> </div> <div class="col-md-5 iPhone-features" style="margin-left:-25px;"> <ul class="top-features"> <li> <span><i class="fa fa-random simple_bg top-features-bg"></i></span> …
7
ブートストラップドロップダウンサブメニューがありません
ブートストラップ3はまだRC版ですが、実装しようとしていました。サブメニュークラスの入れ方がわかりませんでした。CSSにはクラスがなく、新しいドキュメントでさえそれについて何も言わない 2.xにはドロップダウンサブメニューとしてクラス名がありました。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.