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

私はBootstrap 4 alpha 2を使用しており、カードを利用しています。具体的には、公式ドキュメントから取得したこの例を使用しています。すべてのカードを同じ高さにするにはどうすればよいですか？ 私が今考えられるのは、次のCSSルールを設定することだけです。 .card { min-height: 200px; } ただし、これはハードコーディングされたソリューションであり、一般的なケースでは機能しません。私の見解のコードはドキュメントのコードと同じです： <div class="card-columns"> <div class="card"> <img class="card-img-top" data-src="..." alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title that wraps to a new line</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This …

133 html  css  twitter-bootstrap  bootstrap-4  bootstrap-cards 

bootstrap-3にはあります .well、灰色の背景色といくつかのパディングを持つ要素の周りに丸い境界線を追加するクラスがあります。 <div class="well">Basic Well</div> しかし、.wellbootstrap-4にはクラスが見つかりませんでした。.wellbootstrap-4に相当するタグはありますか？

129 css  twitter-bootstrap  twitter-bootstrap-3  bootstrap-4  twitter-bootstrap-4 

ブートストラップ3の新機能...私のレイアウトでは次のようになっています。 <div class="row"> <div class="col-lg-6 col-md-6">elements 1</div> <div class="col-lg-6 col-md-6"> <div class="pull-right"> elements 2 </div> </div> </div> 'elements 2'がcol-lgよりも小さい画面で正しく整列しないようにしたい つまり、col-lg-6に対してのみクラスを右に引き寄せることになります... どうすればこれを達成できますか？ ここにフィドルがあります：http : //jsfiddle.net/thibs/Y6WPz/ ありがとうございました

127 css  twitter-bootstrap  twitter-bootstrap-3  bootstrap-4 

画面サイズが992px未満のときにハンバーガートグラが追加されるブートストラップWebサイトがあります。コードは次のようになります： <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> ハンバーガーのトグルボタンの色を変更する可能性はありますか？

124 css  twitter-bootstrap  bootstrap-4 

ナビゲーションバーでタイトルとしてテキストを入力して、サインアップページを開発しています。それらのテキストに異なる色を付けたいです。この目的のために、別のCSSファイルを使用していますが、ブートストラップのCSSファイルを使用してこれを実行したいと考えています。 誰かがブートストラップで利用可能なカラークラスをリストできますか？

119 css  twitter-bootstrap  twitter-bootstrap-3  bootstrap-4 

閉まっている。この質問はスタックオーバーフローのガイドラインを満たしていません。現在、回答を受け付けていません。 この質問を改善してみませんか？Stack Overflowのトピックとなるように質問を更新します。 2年前休業。 この質問を改善する 新しいWebサイトでBootstrap V4を使用していますが、それがAlphaであることがわかりました。 ただし、ビルドにdatepicker.jsがあることはわかりません。 これがV4に含まれるかどうか誰かが知っていますか？できない場合は誰でも良い日付ピッカーをお勧めできますか？

114 twitter-bootstrap  bootstrap-4 

NuGetを使用してASP.NET CoreのBootstrapを更新したい。私はこれを使いました： Install-Package bootstrap -Version 4.0.0 依存関係は追加されましたが、どのようにしてプロジェクトに追加するのですか？ローカルのNuGet依存関係のパスは何ですか？

111 .net  asp.net-core  nuget  bootstrap-4  asp.net-core-2.0 

ドロップダウンアイテムがページから外れないようにすることはできません。BS3でいくつか試してみましたが、うまくいかないようです。ml-autoが原因かどうかはわかりません。（if-elseステートメントは無視してください） これがCodePenです： <div class="container-fluid"> <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse" style="background-color: #3c763d!important;"> <button class="navbar-toggler navbar-toggler-right navbar-toggler-custom" type="button" data-toggle="collapse" data-target="#searchNav" aria-controls="searchav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span …

111 twitter-bootstrap  css  bootstrap-4 

これは、Bootstrap 3カルーセルで実現しようとしている効果です。 一度に1つのフレームを表示するだけでなく、Nフレームが横にスライドして表示されます。次に、スライドするとき（または自動スライドするとき）、スライドのグループをシフトするように移動します。 これはブートストラップ3のカルーセルで実行できますか？さらに別のjQueryプラグインを探す必要がないことを願っています...

110 jquery  twitter-bootstrap-3  jquery-plugins  carousel  bootstrap-4 

うまく機能するBootstrap 4を使用して、この折りたたみ可能なナビゲーションバーを作成しましたが、ユーザーがリンクをクリックしたときに閉じます。これを行う方法はありますか？ありがとう htmlナビゲーションバー： <nav class="navbar navbar-toggleable-md fixed-top"> <button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="container"> <a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a> <div class="collapse navbar-collapse" id="navbarDiv"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" …

107 html  css  twitter-bootstrap  bootstrap-4  twitter-bootstrap-4 

最新バージョンでは、プルレフトとプルライトが.pull- {xs、sm、md、lg、xl}-{left、right、none}に置き換えられました。 代わりにシンプルに書くのことを意味しclass="pull-right"、私は書き込みに今持っているだろうclass="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right" 退屈な方法はありますか？

103 bootstrap-4 

ではBootstrap 3、テーブル列のタグに適用col-sm-xxしてサイズを変更できます。ただし、これはブートストラップ4では機能しません。ブートストラップ4でこのようなことを実現するにはどうすればよいですか？ththead <thead> <th class="col-sm-3">3 columns wide</th> <th class="col-sm-5">5 columns wide</th> <th class="col-sm-4">4 columns wide</th> </thead> 特にテーブルにデータを追加する場合は、適切なサイズが設定されていない場合にコードプライを確認します。これがどのように実行されるかを確認してください。 <div class="container" style="border: 1px solid black;"> <table class="table table-bordered"> <thead> <tr class="row"> <th class="col-sm-3">3 columns wide</th> <th class="col-sm-5">5 columns wide</th> <th class="col-sm-4">4 columns wide</th> </tr> </thead> <tbody> <tr> <td>123</td> <td>456</td> <td>789</td> </tr> </tbody> …

103 css  twitter-bootstrap  html-table  bootstrap-4 

私はこのページhttp://www.elmastudio.de/にアクセスしたばかりで、Bootstrap 3で左サイドバーの折りたたみを構築できるかどうか疑問に思いました。 サイドバーを上から折りたたむコード（電話のみ）： <button type="button" class="navbar-toggle sidebar-toggle" data-toggle="collapse" data-target=".sidebar-ex1-collapse"> <span class="sr-only">Sidebar</span> <span class="glyphicon glyphicon-check"></span> </button> サイドバー自体には、hidden-xsクラスがあります。次のjsで削除されます $('.sidebar-toggle').click(function(){ $('#sidebar').removeClass('hidden-xs'); }); ボタンをクリックすると、サイドバーが上から切り替わります。サイドバーが上記のWebサイトのように動作するのを見るのは素晴らしいことです。どんな助けでもありがたいです！

102 twitter-bootstrap-3  bootstrap-4  sidebar  collapse 

<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-8"> <div v-for="job in job"> <div class="text-center"> <h1>{{ job.job_title }}</h1> <p><strong>Google Inc. </strong> - {{ job.location }}</p> <h2><u>Job Description</u></h2> </div> <p v-html="desc"></p> <p class="text-center">Posted: {{ formatDate(job.date_created) }}</p> <button v-on:click="applyResume()" id="apply-btn" class="btn btn-primary">{{ buttonText }}</button> </div> </div> <div class="hidden-sm-down col-md-4"></div> </div> </div> このボタンを中央に配置する方法がわかりません。BS 3ではセンターブロックを使用しますが、BS4ではそれはオプションではありません。何かアドバイス？

102 css  twitter-bootstrap  bootstrap-4 

ブートストラップ4をインストールしてみましたが、次のリンクが含まれていました <script src="libs/jquery/dist/jquery.min.js"></script> <script src="libs/tether/dist/js/tether.min.js" ></script> <script src="libs/popper.js/dist/popper.js"></script> <script src="libs/bootstrap/dist/js/bootstrap.min.js" ></script> ただし、次のエラーが発生します。 キャッチされない構文エラー：予期しないトークンのエクスポート それを修正する方法はありますか？

98 javascript  twitter-bootstrap  bootstrap-4  popper.js