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

Bootstrap 4は、人気のあるフロントエンドコンポーネントライブラリの4番目のメジャーバージョンです。Bootstrapフレームワークは、レスポンシブなモバイルファーストのWebサイトとWebアプリの作成を支援します。

13
グリッドに不要なパディングを追加したブートストラップ3および4 .container-fluid
コンテンツを流動的にしたいの.container-fluidですが、Bootstrapのグリッドで使用すると、まだパディングが表示されます。どうすればパディングを取り除くことができますか？ .rowによるパディングが得られないことがわかりましたが、列を追加したいと思います。そうするとすぐに、パディングが戻ります：O。 全幅で使用できるようにしたい。 例： <div class="container-fluid"> <div class="row"> <div class="col-sm-6"> <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> <div class="col-sm-6"> <p>Use this document as a way to quickly start any new project.<br> All …
13
Bootstrap 4レスポンシブテーブルは100％幅を占有しません
Bootstrap 4を使用してWebアプリを構築していて、奇妙な問題が発生しています。Bootstrapのテーブルレスポンシブクラスを利用して、モバイルデバイスでテーブルを水平方向にスクロールできるようにしたいと考えています。デスクトップデバイスでは、テーブルは含まれているDIVの幅の100％を占める必要があります。 .table-sensitiveクラスをテーブルに適用するとすぐに、テーブルが水平方向に縮小し、幅の100％を占有しなくなります。何か案は？ これが私のマークアップです： <!DOCTYPE html> <html lang="en" class="mdl-js"> <head> <title></title> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="application-name" content=""> <meta name="theme-color" content="#000000"> <link rel="stylesheet" href="/css/bundle.min.css"> </head> <body> <div class="container-fluid no-padding"> <div class="row"> <div class="col-md-12"> <table class="table table-responsive" id="Queue"> <thead> <tr> <th><span span="sr-only">Priority</span></th> <th>Origin</th> <th>Destination</th> <th>Mode</th> …
96 css  bootstrap-4 
6
Bootstrap4の列の中央にコンテンツを配置します
問題を解決するために助けが必要です。bootstrap4の列内のコンテンツを中央に配置する必要があります。以下のコードを見つけてください。 <div class="container"> <div class="row justify-content-center"> <div class="col-3"> <div class="nauk-info-connections"> </div> </div> </div>
6
ブートストラップ-ボタンをカードの下部に揃えます
card-deckとcardクラスを使用するブートストラップの例の1つを覗いていました（価格設定の例）。リストの1つに他のリストよりもアイテムが少ない場合、ボタンの配置を修正するにはどうすればよいのでしょうか。 すべてのボタンを（各カードの下部に）垂直に配置したいのですが、これを行う方法がわかりませんでした。.align-bottomクラスを設定し、ボタンをでラップしてみました<div class="align-text-bottom">。また、スペースの追加に関するこの質問からのいくつかの提案を試しましたが、それでも成功しません（また、リストの残りのスペースを埋めるように間隔を可変にする必要があります）。 折り返す<div class="card-footer bg-white">と、カードの下部にあるボタンが整列せず、その周りに何らかの境界線が作成されるため、目的の結果が得られませんでした。 誰かアイデアがありますか？ 編集：これは問題に似たjsfiddleです。
6
Bootstrap4を介して列を注文する
デスクトップとモバイルでさまざまな方法で注文したい3つの列があります。現在、私のグリッドは次のようになっています。 <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md-6"> 2 </div> <div class="col-xs-6 col-md-12"> 3 </div> </div> コードスニペットを実行する結果を非表示スニペットを展開 モバイルビューで、次の出力が必要です。 1-3-2 残念ながら、Bootstrap4の.col-md-push-*and.col-md-pull-*クラスでこれを解決する方法がわかりません。
80 css  bootstrap-4  grid 
7
反応アプリケーションでオブジェクトをプリミティブ値エラーに変換できませんか？
単純なreact-springブートアプリケーションを開発していますが、GitHubの問題のため、IntelliJを使用してアプリケーションスターターファイルを再作成し、前のアプリケーションのpackage.jsonファイルの依存関係データを使用してノードモジュールをインストールしました。 折りたたみナビゲーションバー（ハンバーガーバー->モバイルビューで折りたたむレスポンシブナビゲーションバー）を使用し、ハンバーガーボタンをクリックしてナビゲーションリンクを表示すると、以下のエラーが発生します。しかし、これらすべてのことは、以前のアプリケーションではうまくいきました。 TypeError: Cannot convert object to primitive value HTMLDivElement.<anonymous> C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/js/src/collapse.js:346 343 | ...typeof config === 'object' && config ? config : {} 344 | } 345 | > 346 | if (!data && _config.toggle && /show|hide/.test(config)) { | ^ 347 | _config.toggle = false 348 | } 349 …
2
Uncaught TypeError：オブジェクトをプリミティブ値に変換できません（zone-evergreen.js：171）
角度9（ブートストラップ4とjQuery 3.5.1を使用して）。ブートストラップ折りたたみボタンをクリックすると、ドロップダウンメニューではなく、ブラウザコンソールにエラーが表示されます。 エラーがどこから発生したのか正確にはわかりません。 Can't convert object to primitive value(zone-evergreen:171). Uncaught Type Error: Cannot convert object to primitive value(zone-evergreen.js:171 ) at RegExp.test (<anonymous>) at HTMLDivElement.<anonymous> (bootstrap.bundle.min.js:6) at Function.each (jquery.min.js:2) at S.fn.init.each (jquery.min.js:2) at S.fn.init.a._jQueryInterface [as collapse] (bootstrap.bundle.min.js:6) at HTMLDivElement.<anonymous> (bootstrap.bundle.min.js:6) at Function.each (jquery.min.js:2) at S.fn.init.each (jquery.min.js:2) at HTMLButtonElement.<anonymous> (bootstrap.bundle.min.js:6) at HTMLDocument.dispatch …
9
ngブートストラップをインストールしてコンパイルした後、このエラーが発生します
node_modules/@ng-bootstrap/ng-bootstrap/accordion/accordion.d.ts：191：9のエラー-エラーTS1086：アンサーコンテキストでアクセサーを宣言できません。 191 set ngbPanelToggle（panel：NgbPanel）; ~~~~~~~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/checkbox.d.ts：28：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 28フォーカスを設定（isFocused：boolean）; ~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts：14：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 14 get disabled（）：ブール値。~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts：15：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 15無効に設定（isDisabled：ブール）; ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts：61：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 61設定値（値：任意）; ~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts：65：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 65無効に設定（isDisabled：ブール）; ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts：66：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 66フォーカスを設定（isFocused：ブール）; ~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts：67：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 67 check（）を取得します：ブール値。~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts：68：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 68 get disabled（）：ブール値。~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts：69：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 69 get value（）：any; ~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts：70：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 70 get nameAttr（）：string; ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/carousel/carousel.d.ts：42：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 42セット間隔（値：数値）; ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/carousel/carousel.d.ts：43：9-エラーTS1086：アクセサはアンビエントコンテキストで宣言できません。 43 get interval（）：number; ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/carousel/carousel.d.ts：47：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 …
6
サイドバーはデスクトップではデフォルトで開き、モバイルでは閉じます
サイドバー/ナビゲーションコンテンツ（Bootstrapを使用）をデフォルトでデスクトップに表示（展開）し、デフォルトでモバイルで閉じ、アイコンをモバイルでのみ表示しようとすると、実際に問題が発生します。これを機能させることができないようです。 <nav class="menu menu-open" id="theMenu"> <div class="menu-wrap"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i> </button> <div id="menu-logo"> <img src="Final_Logo.png" width="210" height="214" alt=""> </div> <div id="navbarToggleExternalContent"> <ul id="main-menu"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Writing</a> <a href="#">Events</a> <a href="#">Speaking</a> <a href="#">Music</a> </ul> <ul id="social-icons"> …
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.