[bootstrap] タグが付いた質問
74
質問
0
票
1
回答
101
閲覧数
Bootstrapのiconとlink_to
Bootstrapのiconをボタンにしたいのですが、うまい事使用することが出来ません。
文字ではなく、bootstrapのベルのiconだけのボタンにしたいのですが、classにbi bi-bellを含めても表示されません。
link_toには違ったコードの書き方なのでしょうか?
<div class="notification_navbar">
<%...
0
票
1
回答
56
閲覧数
bootstrapを使ってナビゲーションメニューのリンクの色を変えたい
railsでbootstrapを使っている初学者です。
デバイスを用意た本の投稿サイトを作成しています。
ヘッダーのナビゲーションメニューのリンクの色を白に変えたいのですがと記述したりscssでリンクの変更もしましたが色が変わりません。
<body>
<header>
<nav class="navbar navbar-expand-md ...
0
票
1
回答
67
閲覧数
BootstrapVueでサンプル(特にb-form-select)がうまく表示できない。
BootstrapVueのサイトにある"Complete example"のサンプルを利用したいのですがうまく表示されません。
特にソート・フィルターなどの表以外の部分でサンプルの表示と異なります。
どうやらb-form-selectが上手く表示されていないようなのでそちらのサンプルも試しましたがやはりサンプルと同じように表示されません。
以下作業内容とソースになります。...
0
票
1
回答
131
閲覧数
Bootstrapの検索フォームがiPhoneで表示が崩れる
Bootstrapを使い、このサイトを参考に検索フォームを作成した。
<div class="input-group">
<input type="text" id="search-form" class="form-control input-group-prepend" ...
0
票
1
回答
131
閲覧数
ページによってheaderの色が変わるようにしたい
やりたいこと
ページを移動した際に、ヘッターの文字の色が変わるようにしたいです(Aのページだと、この色。Bのページだとこの色、みたいな。)
現状
以下のようなコードでheaderを書いています。仮にこのbackground -colorをページごとに変えたいときはどのように書けばいいでしょうか?
条件分岐みたいな書き方をするのか、それとも違うクラスを与えたりするのか、よくわかりません。...
0
票
1
回答
105
閲覧数
使っているデバイスによってbackground-sizeを変えたい
やりたいこと
作っているアプリ内で,background-sizeがいまいちいい感じに決まりません.そこで,”pcならcontain, それ以外ならcover”みたいなことをやりたいです.
コード例
pages.scss
.top-main {
padding: 200px 0 200px;
text-align: center;
position: absolute;
top:...
1
票
1
回答
153
閲覧数
Bootstrap Icons の Code Point とは何か?
問題の要約
Bootstrap Icons のページからアイコンの情報を見ると,次のような画面が表示されます.
Code point とは何のことでしょうか?
Unicode や CSS や JS, HTML などと書かれていますが,これをそのまま書いても当然ながら反映されるわけではありません.
どのような使い方を想定したものなのでしょうか?
0
票
1
回答
641
閲覧数
rails7, scssにコードを書いてもbackground-imageが表示されません.
やりたいこと
rails6で作ったアプリを,rails7で作り直してます.
そのなかで,background-imageを表示したいです.
やったこと
rails6で動いていたとおりに,コードを記述しました.
事前に表示したい画像をapp/assets/imagesに入れてることを確認し,以下に添付したように記述しました.
気になること
表示されないのはおかしいな?と思い,bin/rails ...
0
票
1
回答
142
閲覧数
メニューバーのリンクが自動でアクティブ化しない
※他質問サイトでも同様の質問をしています。解決した場合はそちらも更新します。よろしくお願いします。
前提・実現したいこと
rails、bootstrapでメニューバーを作成しています。
現在表示しているページのリンクを自動でアクティブな状態にしたいです。
発生している問題・エラーメッセージ
アクティブな状態が実装できません。
以下記事を参考に作成しました。
サイドメニューのアクティブ・...
0
票
1
回答
187
閲覧数
Rails6 webpacker から bootstrap js を使う方法
Rails + Webpacker の使い方に慣れていなくて
試行錯誤するとすぐにわけがわからなくなるので
毎回以下のように ruby しか入ってない状態から docker を作り直しています
FROM ruby:3.0.1
RUN apt-get update
RUN apt-get install -y build-essential curl git zlib1g-dev libssl-...
1
票
1
回答
690
閲覧数
モーダルをforeachすると、同じデータしか検出されない
使用技術
java,springboot,bootstrap,thymeleaf
実現したいこと
モーダルで確認動作を行った後、申請番号と申請ステータスを送信したいです。
問題点
モーダルを開いた後に申請番号の値が引き継がれておらず、送信されません。
thymeleafにてbootstrapを使い、テーブルをforeachさせているのですが、
...
0
票
1
回答
777
閲覧数
Bootstrapのhamburgar menuが動かない
下記のドキュメントのExternal contentの章で記述されているサンプルコードをそのまま
コピーすると、レイアウトはそのまま黒のヘッダーにアイコンという状態で再現できます。
https://getbootstrap.com/docs/4.1/components/navbar/
ただ、アイコンを押下してもメニューを展開できない状態です。
何か追加で設定する必要があるのでしょうか?
&...
0
票
0
回答
197
閲覧数
jquery3.3.1でのモーダル画像にプラスマイナスボタンをつけて拡大縮小を行いたい
プログラミング初心者です。
モーダルの画像にプラスマイナスのボタンをつけて拡大縮小したいです。
調べたところviewer.jsなどのプラグインを導入するとできそうなのですがやり方がわかりません。
教えていただける方いましたら
よろしくお願いいたします。
jquery3.3.1
[html]
<div>
<img class="img-thumbnail" ...
0
票
1
回答
133
閲覧数
CSSにおいて正方形に余白がある状態にしたい
今HTML,CSS,Bootstrapでページをデザインしています。
画像を正方形にトリミングし、5個ずつ2列で表示します。
以下のようにできているのですが、
それぞれの画像がくっつかず、余白をつけるようにしたいです。
現在、縦横比を保てるように実装できているのですが、余白の設定に詰まっています。
サポートいただけないでしょうか?
▼HTML
<div class="flex-...
0
票
1
回答
133
閲覧数
CSSにおいて画像を上下に5つずつ配置したい
今HTML,CSS,Bootstrapでページをデザインしています。
https://www.f2ff.jp/event/iotc-2020-02にある以下のようなデザインをしたいです。
動きはなくてよくて、配置のみになります。
これを上下2列で5ボックスずつで配置したいです。
どのようにすればいいでしょうか?今色々試しているのですが詰まっているのでアドバイスいただけたらと思います。
...
0
票
1
回答
96
閲覧数
HTML,CSSによるデザインで要素の高さを70%にしたい
html,css,bootstrapを使って、ページのデザインを編集しています。
以下のような画像とセクションの高さを70%にしたいのですが、なかなかうまくいかず詰まっています。
恐れ入りますが、手助けいただけないでしょうか?
以下該当部分のHTMLとCSSです。
▼html
<section class="section-box" data-scroll-index=&...
0
票
0
回答
500
閲覧数
jsファイルを読み込ませるとドロップダウンメニューが動かない
実現したいこと
laravel6に外部ファイルに記述したapp.jsを読み込ませたい
エラーが発生した手順
画面上部に固定しているドロップダウンメニューが開けない、開いても閉じれない(開いたまま)で動かせなくなる
対象のソースコード
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ...
0
票
1
回答
1,589
閲覧数
Bootstrapのドロップダウンが開かないことがある
*問題
Bootstrapのnavでheaderにドロップダウンメニューを導入しているのですが、ドロップダウンが開く場合と開かない場合があり困っています。
navbarには現在ビューのあるリンクとしてHome画面とEdit画面(ドロップダウン内)へのリンクがあるのですが、それらのリンク先へ遷移した直後にドロップダウンメニューが動かなくなってしまいます。しかし、ブラウザで再読込(更新)...
2
票
1
回答
105
閲覧数
Bootstrap 導入方法による違いについて
お世話になります。
Bootstrap(4)の導入方法について、
下記2つの違いを知りたいです。
完全にどっちでも同じなのでしょうか?
・CDN
・ソースファイルをダウンロード
例えば
用意されたスタイルに変更を加えたい場合はこっちの導入方法でないとできない、
というように「こういうことをしたいならこっちの導入方法がよい」
というような差異はあるのでしょうか。
0
票
1
回答
2万
閲覧数
Uncaught TypeError: $(...).on is not a functionが出てしまう
test.jsの「.on('show.bs.modal', function (e)」箇所で以下のようなエラーが出ており、
モーダルは表示されるのですが、モーダルのタイトルが書き換わりません…。
onの使い方、bootstrapのモーダルの書き方がおかしいのでしょうか?
test.js:2 Uncaught TypeError: $(...).on is not a function
...
0
票
1
回答
576
閲覧数
bootstrap でnavbar が正しく表示されません
html の勉強を始めたばかりなのですが、container や jumbotronなどは使えるのにnavbarが正しく表示されません。
bootstrapのNAVSやNAVBARから直接コピペしても表示がホームページにある例とは異なる形で表示されてしまうので何が間違っているのかが全く分からない状態で困っています。
udemyを主な学習材料に使っていましたが、...
0
票
1
回答
81
閲覧数
Bootstrap Collapse クラスに関する質問
Bootstrap の Collapse クラスを使って、パネルを作ってます。
パネルのタイトルをクリックして、開け閉めをするところまではできましたが、
URL にパラメータを指定することで、該当のパネルのみを開いた状態にする方法がありましたら教えていただけますと有難いです。
例えば、https://xxxxxx/index.com#id_10
と指定すると、id_10 ...
0
票
1
回答
2,955
閲覧数
Bootstrapのdatatables内におけるselectボックスにデータを挿入する場合について。
失礼します。
JqueryとBootstrap、Javaで開発しています。
今回datatables内にセレクトボックスを設置しているんですが、データの入れ方がうまくわかりません。
わかるかたいましたら、ぜひご教授お願いいたします。
追加 HTML部分のコードです。
<table id="kategoriTanka" class="table table-bordered table-...
0
票
1
回答
4,278
閲覧数
BootstrapのModalで別htmlの読み込みができましたが、読み込む要素を指定したい
こちらを参照して別htmlを表示させています。
しかし、読み込む要素を指定することができません。
例えばですが上記ページの内容を元にして
「Lab6.html」内の
'div class="panel-body"'のみを読み込ませることは可能でしょうか。
jqueryの.loadで試してみましたが、html内のソースが全て読み込まれてしまうため、
対応方法が検討もつきません。
...
1
票
2
回答
705
閲覧数
rails g kaminari:views bootstrap3が実行できない
railsでgem 'kaminari'を導入した後に、bootstrap3との競合を避けるために、
$rails g kaminari:views bootstrap3
をしたのですが、以下のエラーが出てきて困っております。どなたか対処法を知っていたらぜひご教授お願いします。
rails g kaminari:views bootstrap3
/usr/local/rvm/gems/ruby-...
0
票
2
回答
1,157
閲覧数
.NET MVC ViewからControllerへのbootstrap toggleの状態渡しについて
VIEW側で下記のようなbootstrapを用いたトグルボタンを作成しました。
このトグルボタンの選択状況(ON/OFF)をトグルの切り替わり時にControllerに渡したいのですがどのように実装すればいいでしょうか。
ソースを一部記載致します。
※Controller
public ActionResult Index()
{
var test = ...
0
票
1
回答
1,124
閲覧数
ファイル名を取得してサーブレットクラスに渡したい。
画面でテーブルに対して行をクリックし、黄色行になっている状態で「ファイル名取得ボタン」を押し、黄色行のファイル名をJavaのサーブレットクラスに渡したいと思います。テーブルに対して行をクリックし、黄色行にするとこまでできているのですが、ファイル名を取得してJavaのサーブレットクラスにファイル名を渡すコードをどう書くか分かりません。どう書けばよろしいでしょうか。
<!DOCTYPE ...
0
票
2
回答
1万
閲覧数
画面のテーブルに対して行選択するコードの書き方について。
仕様として画面のテーブルに対して行選択しているファイルをダウンロードボタンでダウンロードできるものを考えています。
まず行選択できるコードの書き方が分からなくて悩んでいます。行選択できるようにするにはどういったコードを追記すればよろしいでしょうか。
ソースは下記となります。
<!DOCTYPE html>
<html lang="ja">
<head>
<...
0
票
1
回答
193
閲覧数
VueにおいてBootstrapTimepickerのデータ更新が取得できずバインディングできない
Vueを勉強し始めて2ヶ月程です。
BootstrapTimepickerを利用して単純なバインドを試しているのですが、
http://jdewit.github.io/bootstrap-timepicker/
Timepickerで更新される値がVueで更新を検知できずバインディングがされません。
カスタムイベント等も試してみたのですが、なぜか検知できず。
...
1
票
0
回答
60
閲覧数
android-bootstrap-widgetsの使い方
android-bootstrap 2.xバージョンを使用しておりまして、こちら https://github.com/Bearded-Hen/Android-Bootstrap の公式サイトを見たのですが、xmlでの例はあるのですが、
使い方が書いていません。xmlでの使い方のドキュメントはどこにあるのでしょうか?
どなたかご協力お願い致します。
0
票
1
回答
1,404
閲覧数
モーダル画面内の入力値が文字化けする(TOMCATによる文字化け)
AngulerJSで入力があるモーダル画面を作成したのですが
Inputタグの入力値をサーバで受け取ると文字化けしています。
この場合文字セットをどこで指定すればよいのでしょうか?
(なお、モーダル画面用のスクリプトにはmetaタグにて文字セットを設定しています)
<script type="text/ng-template" id="SeikyusakiInsert">
&...
1
票
0
回答
3,785
閲覧数
htmlの印刷でIEのみ余分な空白ページが出力される
現在asp.net mvc 5 にてBootstrapを使用したWebアプリを開発中ですが、
tableタグを使用したページをwindows.print()で印刷した際、IEのみ2ページ目に空白ページが表示されてしまいます。(IE11で確認しております。)
他のブラウザ(chrome,firefox,safari,edge)では1ページのみ出力され、空白ページは表示されません。
...
0
票
1
回答
210
閲覧数
AngulerJSでのモーダル画面表示
AngulerJSとBootStrapを使用してモーダル画面を表示しようとしているのですが
$modal.openのところで
TypeError Cannot read property 'open' undifined
とエラーが出てしまいます。
原因はなんでしょうか?
var app = angular.module('app',['ui.bootstrap']);
//...
0
票
0
回答
147
閲覧数
bootstrapの追従機能を持つAffixプラグインがうまく機能しません
railsでbootstrapの機能であるAffixプラグインを実装しようとしているのですが、うまく機能しません。現状としては同ページ内においてリロードをかけると機能するのですが、一回目にページ遷移した際にはうまく機能してもらえません。affixの属性を挿入したものが固定のままになってしまいます。
左の部分をaffixで追従させて、右半分をbootstrapのoffsetで右に寄せています。
...
1
票
0
回答
549
閲覧数
HTML5 + Bootstrap + IE11 + Windows7にて、フォーカスを当てた時の挙動がおかしい
HTML5、Bootstrapにてページを作成しています。
IE11でテキストフィールドにフォーカスを当てた際に、謎の事象が発生しました。
1.枠線の影が消える
2.テキストフィールドの左上にグレーの影が表示される
この現象は下記の環境で発生しています。
・Windows7 Professional SP1(32bit)
・IE 11.0.9600.18537 (更新バージョン 11....
0
票
1
回答
1,053
閲覧数
RSpec+CapybaraでBootstrap 4のドロップダウンをテストする方法
現在、RSpec+Capybaraでテストコードを書こうとしています。
やりたいことはナビゲーションバーの中にあるドロップダウンをクリックして表示されたドロップダウンメニューの中にログアウトというコンテンツがあることを確かめることです。
Viewのコードは下記の通りです。
テンプレートエンジンはslimを、CSSフレームワークはBootstrap 4を使っています。
nav.navbar
...
0
票
1
回答
102
閲覧数
隔離スコープのパラメータが同期されない
開発環境は
Angular1.5
AngularBootstrap
TypeScript
です。
AngularbootstrapのDatepickerPopupをディレクティブでラップしています。
カスタムディレクティブで展開したHTMLから、
ng-clickで隔離スコープのbooleanを切り替えるだけのスコープ内関数を呼び出します。
this.scope = {};
this....
0
票
1
回答
2,327
閲覧数
クリックイベントが発火しない
bootstrapのリストがクリックされたときにactiveをクラスに追加たいと考えているのですが、以下のコードではクリックイベントが発火しませんでした。どのようにすればクリックイベントを発火させることができるのでしょうか。
javascript
$('.list-group .list-group-item').on('click', function(e){
...
0
票
1
回答
232
閲覧数
チェックボックスを扱って時間を変更したい。
画面表示をしたときにデフォルトでは時間が9:00と表示され、
終了時刻のチェックボックスにチェックを入れたら22:00に切り替わり、チェックボックスを外したら21:00に切り替わるという実装をしたいと考えていますが上手くいきません。(画面表示をしたときにデフォルトでは時間が9:00というのはできてます。)
どのように修正したらよろしいでしょうか。お願いいたします。
<!DOCTYPE ...
1
票
1
回答
4,696
閲覧数
.NETでBootstrapのModalがOnClickイベント後に閉じてしまう。
ASP.NET C#にてWebアプリケーションを作成しています。
BootStrapのModalを使用しています。
モーダル表示用のボタンクリック時に
サーバ側処理でOnclickイベントを入れているのですが、
このイベント発生直後にモーダルが勝手に閉じてしまいます。
sample.aspx:modal表示ボタン
<input type="button" id="...
0
票
1
回答
3,373
閲覧数
要素を横一列で並べたい。
営業時間のラベルから二つ目の時間入力までの要素を画面が小さくなっても横一列にしたいと思っていますが上手くいきません。画面を小さくすると、ラベルと入力のテキストボックスが縦に並んでしまいます。どう修正したらいいのか教えていただいてもよろしいでしょうか。
【コード】
<!DOCTYPE html>
<html lang="ja">
<head>
...
0
票
1
回答
1,374
閲覧数
Timepickerが機能しない。
画面に「Timepicker」の機能を実装中ですが上手くいきません。
入力ボックスに「11:00 PM」という表示はでているのですがボタンを押そうとしても何も機能していない形です。ボタンをクリックして時間を選べるようにするにはどう修正したらよろしいでしょうか。
以前から使っている「http://getbootstrap.com/getting-started/#download」...
1
票
3
回答
2,141
閲覧数
modal内の特定の要素の高さを取得したい
現在、modal.js の version3.3.6 を利用して、モーダル表示を行うページを作っています。
この画面にはボタンがあり、ボタンをクリックするとモーダルウィンドウが表示されます。
モーダルの中には<p>で包んだ文字列があり、知りたいのはこの要素の高さの取得法です。
現状、クリックイベントで
takasa = $("p").height();
...
0
票
1
回答
427
閲覧数
パーシャルのパーシャルに変数を送る方法を教えてください。
前提・実現したいこと
パーシャルのパーシャルにコントローラーのインスタンス変数を送りたいです。
★発生している問題・エラーメッセージ
投稿のタイムラインをクリックすると、
Twitterのようなモーダルウィンドウが表示されるようにviewを作成しました。
モーダルウィンドウに表示されるview(コメントが追加されます) ≒ クリックした投稿です。
...
0
票
1
回答
311
閲覧数
pagedown-bootstrap-railsでプレビューが表示されない。
前提・実現したいこと
pagedown-bootstrap-railsを実装したいです。
発生している問題・エラーメッセージ
プレビューが表示されません。
該当のソースコード
以下、実装手順とともに該当コードを記します。
【Gemfile】
gem 'bootstrap-sass'
gem 'font-awesome-rails'
gem 'simple_form'
gem 'pagedown-...
1
票
0
回答
1,808
閲覧数
Bootstrap下でtable td の幅を固定する方法が機能しない
rails (4.2.6)bootstrap-sass (~> 3.3.4)を使ってtableを表示しています。td幅を固定したいfieldがあり、<th class="col-md-4">, <th class="col-md-4"> などを設定したのですが機能しません。なにが悪いかご指導下さい。
トライアルした手順
テストプロジェクトを造りました
rails ...
0
票
1
回答
2,090
閲覧数
bootstrapでtableの縦線を消す方法について
bootstrapでtableの縦線を消して横線だけ表示させたいです
知ってる方がいれば是非ご教授ください
3
票
1
回答
1,109
閲覧数
画面が小さくなっても要素を横一列に並んだままにしたい
Bootstrapを使ってログインID入力のみのログイン画面の作成を行っています。表示画面が小さくなってもユーザIDラベル、テキストボックス、submitボタンを横一列で表示するようにしたいのですが下記のコードではうまくいかず困っています。
どのようにコードを記載すればよろしいでしょうか。
自身が書いたソースは下記となります。
<!DOCTYPE html>
<...
0
票
1
回答
1,316
閲覧数
ブラウザのサイズに依らずに画像を縦いっぱいに表示するには
質問させてください。
このサイトのようにブラウザのサイズがどんな高さであっても(スマホなども含みます)、ほぼ縦幅いっぱいに画像を表示したいと思います。
しかし自分のページでは、スマホでの表示時に横幅に依存してしまって縦の長さが短くなってしまいます。
どのようにCSSを書けばよいのか教えて頂けませんでしょうか?
宜しくお願い致します。
html {
font-size: 62....
0
票
1
回答
2,752
閲覧数
要素中にある複数の要素を適宜折り返したい、ただし要素の途中で折り返さない
bootstrapのlabelを使っています。
これを複数横並びにしていますが、指定の親要素幅を超えると親要素幅が伸びてしまいます。
複数ある子要素を横並びにしつつ、適宜折り返したいです。ただし要素の途中で折り返したく有りません。要素単位で折り返したいです。
下記の例なら、label label-info指定の子要素を横並びにしますが、「データn」の途中で折り返さず、親要素幅以内で「データn」...