Bootstrapに関連する質問一覧

新着
アクティブ
未回答
未解決
注目
解決済

解決済

回答

1
lightning g3でのBootstrap5の読み込み

lightnigを用いてwordpressでの- リストHP作成の勉強をしています。初心者の為、場違いな質問でしたらご指摘お願いいたします。前提・実現したいこと lightning g3(無料版）に bootstrap5 accordion の機能を搭載したい。発生している問題・エラーメッセージ bootstrap5のスターターテンプレート中に上記アコーディオンのhtmlを記述し
- WordPress
- Bootstrap
- 0評価
- 0クリップ
- 74PV
sumop 17時間前に回答
受付中

回答

1
idに移動するjsを追加したところ、サイト表示が非常に重くなってしまいました。なるべく仕様は変えずに軽くしたいです。（実アプリのためタイムアウト頻発で焦っております💦）

現在の状況とやりたいこと https://example.com/events/1#houkoku といったid付のリンクをクリックすると、 ①イベントページのbootstrapの３つのタブの内の１つを開き、 ②そのタブの位置までスクロールするといったことをJSで実装いたしました。その結果、https://example.com/events/1#houkokuにアクセスが少しでも集中
- -1評価
- 2クリップ
- 173PV
maisumakun 1日前にコメント
解決済

回答

2
BootstrapのGridSystemとCSSによる縮小について

聞きたいこと最初CSSによるブラウザの拡大縮小について調べたときtranform: scale()とzoom:の２つがあり、そのうちzoomの方は非標準であり使うべきではない(https://developer.mozilla.org/ja/docs/Web/CSS/zoom)ということがわかりました。しかしBootstrapのGridSystemにおいて、zoomでしか対応できなさそうな挙動
- HTML
- CSS
- Webサイト
- Bootstrap
- 0評価
- 0クリップ
- 83PV
Lhankor_Mhy 1日前にコメント
受付中

回答

2
入力フォームの横に文字を入れる方法

解決しました
- Bootstrap
- Vue.js
- 0評価
- 0クリップ
- 174PV
powersholder 3日前に質問を編集
受付中

回答

1
Bundleに書かれているコードとSeparateに書かれているコードの使い方の違いが分かりません。

前提・実現したいこと Bundleに書かれているコードとSeparateに書かれているコードの使い方の違いを知り、Bootstrapを使う時に役立てたいです。画像中にあるPopperが何なのかも分からないので理解したいです。発生している問題・エラーメッセージ
- Bootstrap
- 0評価
- 0クリップ
- 56PV
yu... 5日前に質問を編集
受付中

回答

1
アコーディオンの動きを正常にしたい。

前提・実現したいことアコーディオンのうち、一番下を開くと同時に上が開きます。その後も不規則に開きます。ご教授いただけるとありがたいです。発生している問題・エラーメッセージエラーメッセージは特にありません。該当のソースコード <div id="home_accordion" class="accordion"> <div class="card">
- Python
- HTML
- CSS
- Django
- Bootstrap
- 0評価
- 0クリップ
- 102PV
Kazuhiro-ch 6日前に回答
解決済

回答

1
バナーの位置を下に下げたい

現状画像のように、ページを開いたときにすでにバナーがメニュー下に重なり、見づらくなってしまっています。いろいろ試してみたのですが、動きません。お力お貸しください！！こちらとマルチポストしております。こちらで情報が更新・解決され次第、反映する予定です。どうぞよろしくお願いいたします。実現したいこと分かりにくいかもしれませんが、メニューバー（白い部分）とバナー（山の写真の部分）が重なって
- HTML
- CSS
- Django
- Bootstrap
- 0評価
- 0クリップ
- 202PV
Kazuhiro-ch 6日前に回答
受付中

回答

0
Rails6の本番環境で背景画像が表示されない

/* *= require_tree . *= require_self */ @import "reset"; @import "bootstrap/scss/bootstrap"; @import "font-awesome-sprockets"; @import "font-awesome"; @import "navbar"; @import "roads"; @import "use
- CSS3
- HTML5
- Bootstrap
- Ruby on Rails 6
- 0評価
- 0クリップ
- 46PV
teratailが 6日前にアップデート
受付中

回答

0
Thymeleaf(th:each)に適応した、子要素数によって可変なレイアウト

こんにちは。 Spring Bootについて初学者なので拙いところもあると思いますが、よろしくお願いします。実現したいこと Thymeleafで以下のようなレイアウトを実現したいです。説明すると、A,B共に共通項目でGroupingされたListになっていて、リストごとに横に並べられ、その中にリストの中のデータが子要素として配置されています。（レイアウトの都合上、画像ではリストの中身は
- CSS
- HTML5
- Bootstrap
- Thymeleaf
- 0評価
- 0クリップ
- 65PV
teratailが 6日前にアップデート
受付中

回答

0
初回アクセスでBootstrapの変数が読み込まれない

サーバー立ち上げ後のアクセスでBootstrapの変数が読み込まれないポートフォリオ作成中に、発生しました。 Bootstrap4.2 を使用しており、 _variables.scssファイル内にデフォルトで入っている $info というシアン色の変数が、初回アクセスで読み込まれません。詳細 $ docker-compose upコマンドにてrailsサーバーを起動し、アプリにアクセ
- CSS
- Bootstrap
- Docker
- Ruby on Rails 5
- SCSS
- 0評価
- 0クリップ
- 79PV
teratailが 1週間前にアップデート
受付中

回答

1
bootstrap　グリッドシステム12分割で収まるように記述したつもりが改行されてしまう。

前提・実現したいこと bootstrapのグリッドシステムを利用したい。１２分割にできるかどうかを試したい。 ■■な機能を実装中に以下のエラーメッセージが発生しました。発生している問題・エラーメッセージ１２分割で収まるように記述したつもりが、改行されてしまいます。該当のソースコード HTML 試したこと 12分割で収まるように設定したのですが、なぜか改行されてしまいます。 <h
- Bootstrap
- 0評価
- 0クリップ
- 74PV
ikapy 1週間前にコメント
受付中

回答

0
Rails5 bootstrapで導入不具合

こちらのボタンを押しても反応しません。モーダル等も試しましたが、同じくボタンを押しても、モーダルが表示されることはありませんでした。 index.html.erb <h1>Pages#index</h1> <p>Find me in app/views/pages/index.html.erb</p> <p> <a class="btn btn-primary" data-bs-togg
- 0評価
- 0クリップ
- 60PV
teratailが 1週間前にアップデート
解決済

回答

2
Laravel,Docker,Bootstrapでの開発でCSSが効いたり、効かなかったりする現象

前提・問題・Docker ・Laravel6 ・Bootstrap v4.6.0 にて開発をしています。 Bootstrapとは別のCSSファイルでフロントを整えている際に、CSSの変更がきちんと反映される時と、反映されない時があります。反映されなくなると何をしても変更できなくなります。ただ何かがきっかけで変更が反映されだすようになります。その「何か」がわからないため質問させていただき
- CSS
- Laravel
- Bootstrap
- Docker
- 0評価
- 0クリップ
- 150PV
zono3 1週間前にコメント
解決済

回答

1
JS HTML ボタンを押したとき折り畳みの開閉と同時にカウントを行いたい

前提・実現したいこと実現したいことオンラインテストのようにボタンを押した後カウントが始まったと同時に問題(コンテンツ）が見れるようにしたい別々のボタンを用意すれば簡単だが一つのボタンで二つとも行いたい。こちらのサイトを参考にボタンの折り畳みの開閉を作成しました。発生している問題・エラーメッセージボタンを押したときカウントが行われるが、折り畳まれたコンテンツは表示ない。押す前押
- JavaScript
- HTML
- CSS
- jQuery
- Bootstrap
- 0評価
- 0クリップ
- 75PV
kmkr 6日前にベストアンサー
受付中

回答

1
スライダーで使用しているbootstrap5のモーダルをjsで表示させたい

前提・実現したいことこちら（http://black-flag.net/jquery/20200520-6799.html）のスライダーを使用してbootstrap5のモーダルを表示させたいのですが、スマホだとタップしてもモーダルが開けないのでjsで表示させたいです。該当のソースコード if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) !=
- 0評価
- 0クリップ
- 142PV
webgoto 1週間前に回答
受付中

回答

1
bootstrap導入：SassC::SyntaxError in Pages#index

bootstraapを導入した際に、以下のようなエラーが発生してしまい、詰まっています。 SassC::SyntaxError in Pages#index Error: File to import not found or unreadable: bootstrap. on line 16:1 of app/assets/stylesheets/application.scss @i
- 0評価
- 0クリップ
- 62PV
odataiki 1週間前に回答
解決済

回答

1
tableのtdの最大行数を指定したい

プログラミング学習３歴ヶ月の者です。現在、データベースのデータを表にまとめようとしているのですが、長文のデータがあった際に、<tr>の高さがすごく高くなってしまいます。そこで、それぞれのレコードの最大表示行数を3行にしたいと思い、trやtdにstyleでmax-heightを指定しようとしたり、CSSのline-crampを適用しようとしたのですが、適用されませんでした。 bootstrapの
- HTML
- CSS
- Bootstrap
- Ruby on Rails 5
- 0評価
- 0クリップ
- 84PV
kobatomo-0725 2週間前にベストアンサー
解決済

回答

1
id付のリンクをリロードしたときに、idの場所までスクロールされた後、リロードを開始した時の位置に戻されてしまいます。どなたかお知恵をお貸しくださいませんでしょうか？

やりたいこと https://example.com/event#event_houkoku といったリンクをリロードした際に、一度#btn1にスクロールした後、そのまま止まらず、開いていたポジションにスクロールが戻ってきてしまいます。そのまま#btn1に留まるか、もしくはリロードの場合は移動しないか、といったことを実装したいです。現在のコード現在、Bootstrapで作ったタブが２つ
- 0評価
- 0クリップ
- 87PV
akikko 2週間前に回答
解決済

回答

1
リンクのクリック時に、リンク内に含まれるIDまで移動させたいです（Bootstrapのタブを使用しています）。お客様からご意見を頂いたものの反映させられず大変困っております。

やりたいこと現在、Bootstrapで作ったタブが２つ（「詳細」と「報告」）あります。報告が投稿されたときに、メールでお知らせがいきます。そのメールに記載されたリンクをクリックをした場合に限り、報告タブを開き、そこまでスクロールさせたいです。例 https://aaa.com/event1#houkoku といったアドレスを作り、IDがhoukokuのタブを開き、そこまで飛ばせた
- -1評価
- 0クリップ
- 229PV
Lhankor_Mhy 2週間前にコメント
解決済

回答

2
レスポンシブ対応時にbodyのサイズが変更されません。

前提・実現したいこと現在制作中のお問い合わせフォームのレスポンシブ化をうまく行いたいです。 PCでの表示時とSPでの表示時でのデザインに関してはほとんど同じです。 PC時では背景が表示され、SPでは背景が隠れるように行いたいです。しかし、現状はSPでの表示時にbodyのwidthgが980px以下にならず、とても見にくい状態です。 bodyのwidthがデバイスの幅に合わせて変更できるようにし
- HTML
- CSS
- HTML5
- Bootstrap
- SCSS
- 0評価
- 0クリップ
- 115PV
aku424tt 2週間前にコメント