[bootstrap] タグが付いた質問
74
質問
1
票
1回答
63 件の閲覧数
jQueryの<script>内の記述とファイルの記述の違い
開発環境
Ruby 2.5.5
Ruby on Rails 5.2.3
Bootstrap4
jQueryをhtmlファイルに<script>タブで記述する場合と
jsファイルに別途記述する場合では、挙動に差があるのでしょうか?
Bootstrapの練習のためにこちらのサンプルをRuby on Railsで試しに使ってみたのですが、
以下のjQueryをindex.html....
0
票
0回答
29 件の閲覧数
bootstrap modalウィンドウの高さの設定
すみません、ご教示いただけますと幸いです。
現在、webシステムにて、bootstrapのmodalウィンドウの高さを大きくしようとしています。
横は以下の様なcssのクラスを作り、広がったのですが、高さがうまくいかず、てこずっています。
.modal_large .modal-dialog{
min-width:75%;
max-width: 80%;
width: ...
0
票
1回答
37 件の閲覧数
要素の横並びができず困っています。
はじめまして。menu-image要素とmenu-text要素を横並びにしたいのですが、できずに困っています。初歩的な質問だとは思いますが、自身で解決できずに困っています。宜しくお願い致します。
.tab-pane {
display: flex;
}
.menu-tab {
display: flex;
width: 50%;
background-...
0
票
1回答
227 件の閲覧数
Bootstrapのドロップダウンが開かないことがある
*問題
Bootstrapのnavでheaderにドロップダウンメニューを導入しているのですが、ドロップダウンが開く場合と開かない場合があり困っています。
navbarには現在ビューのあるリンクとしてHome画面とEdit画面(ドロップダウン内)へのリンクがあるのですが、それらのリンク先へ遷移した直後にドロップダウンメニューが動かなくなってしまいます。しかし、ブラウザで再読込(更新)...
3
票
1回答
85 件の閲覧数
coverなのに画像の高さが無効化される
bootstrap4でサムネイルリストを作りましたが、そのCSSでobject-fitにcoverとしたにも関わらず、画像の高さがcoverになりません。どうすれば改善するのでしょうか?
HTML
<div class="container">
<div class="row">
<div class="col-6">
<...
1
票
1回答
56 件の閲覧数
Bootstrap 導入方法による違いについて
お世話になります。
Bootstrap(4)の導入方法について、
下記2つの違いを知りたいです。
完全にどっちでも同じなのでしょうか?
・CDN
・ソースファイルをダウンロード
例えば
用意されたスタイルに変更を加えたい場合はこっちの導入方法でないとできない、
というように「こういうことをしたいならこっちの導入方法がよい」
というような差異はあるのでしょうか。
3
票
1回答
140 件の閲覧数
どうして.containerで15pxして.rowで-15pxするのでしょうか?
基本的にBootstrapは.containerで括ってその中で.rowを記述していく書き方をします。
なのに何故、わざわざBootstrapは.containerで15pxして.rowで-15pxしているのでしょうか?
該当ソースリンク:
https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-grid.css#L22
...
1
票
1回答
70 件の閲覧数
HTMLテキストフィールドの高さを合わせる方法は?
このTwitterページの上部ログインフォームにて、アカウント名フィールドとパスワードフィールドの上辺の位置が揃っています。
これを再現しようとCSSを考えているのですが、参考にデベロッパーツールで確認してもどこにその指定があるのか分かりません。
分かる方いらっしゃいますか?調べ方もご教示いただけたら助かります。
0
票
0回答
62 件の閲覧数
TwitterにおけるログインフォームのCSSについて
https://twitter.com/?logged_out=1&lang=ja
このTwitterページの上部ログインフォームにて、アカウント名記入欄の高さが98pxあります。
が、デベロッパーツールで確認してもどこにその指定があるのか分かりません。
分かる方いらっしゃいますか?調べ方もご教示いただけたら助かります。
0
票
1回答
9,195 件の閲覧数
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回答
303 件の閲覧数
bootstrap でnavbar が正しく表示されません
html の勉強を始めたばかりなのですが、container や jumbotronなどは使えるのにnavbarが正しく表示されません。
bootstrapのNAVSやNAVBARから直接コピペしても表示がホームページにある例とは異なる形で表示されてしまうので何が間違っているのかが全く分からない状態で困っています。
udemyを主な学習材料に使っていましたが、...
0
票
0回答
1,389 件の閲覧数
Bootstrap4でタブのナビゲーションでのCSSデザインで困っています。
Bootstrap4でタブのナビゲーションを作成しようとしています。
https://v4-alpha.getbootstrap.com/components/navs/
このようなイメージのデザインを実現したいです。
良いコードはありませんでしょうか?
現在、下記のような感じでまずは形を作りかけています。
アクティブなタブ以外にbox-shadowをかけるのと▼の表示切り替えとかは、il....
0
票
1回答
75 件の閲覧数
Bootstrap Collapse クラスに関する質問
Bootstrap の Collapse クラスを使って、パネルを作ってます。
パネルのタイトルをクリックして、開け閉めをするところまではできましたが、
URL にパラメータを指定することで、該当のパネルのみを開いた状態にする方法がありましたら教えていただけますと有難いです。
例えば、https://xxxxxx/index.com#id_10
と指定すると、id_10 ...
0
票
1回答
1,104 件の閲覧数
Bootstrapのdatatables内におけるselectボックスにデータを挿入する場合について。
失礼します。
JqueryとBootstrap、Javaで開発しています。
今回datatables内にセレクトボックスを設置しているんですが、データの入れ方がうまくわかりません。
わかるかたいましたら、ぜひご教授お願いいたします。
追加 HTML部分のコードです。
<table id="kategoriTanka" class="table table-bordered table-...
0
票
1回答
1,735 件の閲覧数
BootstrapのModalで別htmlの読み込みができましたが、読み込む要素を指定したい
こちらを参照して別htmlを表示させています。
しかし、読み込む要素を指定することができません。
例えばですが上記ページの内容を元にして
「Lab6.html」内の
'div class="panel-body"'のみを読み込ませることは可能でしょうか。
jqueryの.loadで試してみましたが、html内のソースが全て読み込まれてしまうため、
対応方法が検討もつきません。
...
1
票
2回答
348 件の閲覧数
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回答
698 件の閲覧数
.NET MVC ViewからControllerへのbootstrap toggleの状態渡しについて
VIEW側で下記のようなbootstrapを用いたトグルボタンを作成しました。
このトグルボタンの選択状況(ON/OFF)をトグルの切り替わり時にControllerに渡したいのですがどのように実装すればいいでしょうか。
ソースを一部記載致します。
※Controller
public ActionResult Index()
{
var test = ...
0
票
1回答
570 件の閲覧数
Bootstrap Modal 内にAjaxで表示
#mymodalの.modal-body内にphpfile.phpで呼び出された内容を表示したいのですが、以下のコードではうまくいきません。
modalは出て来るし、ajaxでなければ表示されるので、modal内へのページの読み込みができていないと言うことでしょうが…。
function addCart(id){
$('#mymodal .modal-body').load("...
1
票
1回答
1,834 件の閲覧数
bootstrap のmodal がiOSの端末でスクロール出来ない
bootstrap3でmodal内で検索できるような仕組みを作りました。テキストボックスの内容をAjaxでPHPに送信して結果をJsonで受け取ります。その内容をmodal内で表示するのですが、結果が多くなったときにスクロール(スワイプ)が出来ない状況になりました。どうもこの現象がiOSの端末のみで発生しているようです。
この解決方法をご存知の方がいらっしゃったら教えて下さい。
1
票
1回答
277 件の閲覧数
jqueryでtableの中身を上から読み込む(複数行)
jqueryでmodal上にあるテーブルを読み込み、
一部のカラムをhtml上にtemplateで読み込ませて表示させたいです。
今のところ、eachを使えば読み込めると思ったのですが
tableの最終行しか読み込まれませんでした。
これは参考にしたURLです
jqueryで要素のある順に番号をつける
//コード
function allsave(){
var ...
0
票
1回答
697 件の閲覧数
ファイル名を取得してサーブレットクラスに渡したい。
画面でテーブルに対して行をクリックし、黄色行になっている状態で「ファイル名取得ボタン」を押し、黄色行のファイル名をJavaのサーブレットクラスに渡したいと思います。テーブルに対して行をクリックし、黄色行にするとこまでできているのですが、ファイル名を取得してJavaのサーブレットクラスにファイル名を渡すコードをどう書くか分かりません。どう書けばよろしいでしょうか。
<!DOCTYPE ...
0
票
2回答
6,186 件の閲覧数
画面のテーブルに対して行選択するコードの書き方について。
仕様として画面のテーブルに対して行選択しているファイルをダウンロードボタンでダウンロードできるものを考えています。
まず行選択できるコードの書き方が分からなくて悩んでいます。行選択できるようにするにはどういったコードを追記すればよろしいでしょうか。
ソースは下記となります。
<!DOCTYPE html>
<html lang="ja">
<head>
<...
0
票
1回答
129 件の閲覧数
VueにおいてBootstrapTimepickerのデータ更新が取得できずバインディングできない
Vueを勉強し始めて2ヶ月程です。
BootstrapTimepickerを利用して単純なバインドを試しているのですが、
http://jdewit.github.io/bootstrap-timepicker/
Timepickerで更新される値がVueで更新を検知できずバインディングがされません。
カスタムイベント等も試してみたのですが、なぜか検知できず。
...
1
票
0回答
56 件の閲覧数
android-bootstrap-widgetsの使い方
android-bootstrap 2.xバージョンを使用しておりまして、こちら https://github.com/Bearded-Hen/Android-Bootstrap の公式サイトを見たのですが、xmlでの例はあるのですが、
使い方が書いていません。xmlでの使い方のドキュメントはどこにあるのでしょうか?
どなたかご協力お願い致します。
0
票
1回答
933 件の閲覧数
モーダル画面内の入力値が文字化けする(TOMCATによる文字化け)
AngulerJSで入力があるモーダル画面を作成したのですが
Inputタグの入力値をサーバで受け取ると文字化けしています。
この場合文字セットをどこで指定すればよいのでしょうか?
(なお、モーダル画面用のスクリプトにはmetaタグにて文字セットを設定しています)
<script type="text/ng-template" id="SeikyusakiInsert">
&...
1
票
0回答
2,564 件の閲覧数
htmlの印刷でIEのみ余分な空白ページが出力される
現在asp.net mvc 5 にてBootstrapを使用したWebアプリを開発中ですが、
tableタグを使用したページをwindows.print()で印刷した際、IEのみ2ページ目に空白ページが表示されてしまいます。(IE11で確認しております。)
他のブラウザ(chrome,firefox,safari,edge)では1ページのみ出力され、空白ページは表示されません。
...
0
票
1回答
172 件の閲覧数
AngulerJSでのモーダル画面表示
AngulerJSとBootStrapを使用してモーダル画面を表示しようとしているのですが
$modal.openのところで
TypeError Cannot read property 'open' undifined
とエラーが出てしまいます。
原因はなんでしょうか?
var app = angular.module('app',['ui.bootstrap']);
//...
0
票
0回答
135 件の閲覧数
bootstrapの追従機能を持つAffixプラグインがうまく機能しません
railsでbootstrapの機能であるAffixプラグインを実装しようとしているのですが、うまく機能しません。現状としては同ページ内においてリロードをかけると機能するのですが、一回目にページ遷移した際にはうまく機能してもらえません。affixの属性を挿入したものが固定のままになってしまいます。
左の部分をaffixで追従させて、右半分をbootstrapのoffsetで右に寄せています。
...
1
票
0回答
485 件の閲覧数
HTML5 + Bootstrap + IE11 + Windows7にて、フォーカスを当てた時の挙動がおかしい
HTML5、Bootstrapにてページを作成しています。
IE11でテキストフィールドにフォーカスを当てた際に、謎の事象が発生しました。
1.枠線の影が消える
2.テキストフィールドの左上にグレーの影が表示される
この現象は下記の環境で発生しています。
・Windows7 Professional SP1(32bit)
・IE 11.0.9600.18537 (更新バージョン 11....
0
票
1回答
554 件の閲覧数
RSpec+CapybaraでBootstrap 4のドロップダウンをテストする方法
現在、RSpec+Capybaraでテストコードを書こうとしています。
やりたいことはナビゲーションバーの中にあるドロップダウンをクリックして表示されたドロップダウンメニューの中にログアウトというコンテンツがあることを確かめることです。
Viewのコードは下記の通りです。
テンプレートエンジンはslimを、CSSフレームワークはBootstrap 4を使っています。
nav.navbar
...
0
票
1回答
89 件の閲覧数
隔離スコープのパラメータが同期されない
開発環境は
Angular1.5
AngularBootstrap
TypeScript
です。
AngularbootstrapのDatepickerPopupをディレクティブでラップしています。
カスタムディレクティブで展開したHTMLから、
ng-clickで隔離スコープのbooleanを切り替えるだけのスコープ内関数を呼び出します。
this.scope = {};
this....
0
票
1回答
1,512 件の閲覧数
クリックイベントが発火しない
bootstrapのリストがクリックされたときにactiveをクラスに追加たいと考えているのですが、以下のコードではクリックイベントが発火しませんでした。どのようにすればクリックイベントを発火させることができるのでしょうか。
javascript
$('.list-group .list-group-item').on('click', function(e){
...
0
票
1回答
164 件の閲覧数
チェックボックスを扱って時間を変更したい。
画面表示をしたときにデフォルトでは時間が9:00と表示され、
終了時刻のチェックボックスにチェックを入れたら22:00に切り替わり、チェックボックスを外したら21:00に切り替わるという実装をしたいと考えていますが上手くいきません。(画面表示をしたときにデフォルトでは時間が9:00というのはできてます。)
どのように修正したらよろしいでしょうか。お願いいたします。
<!DOCTYPE ...
1
票
1回答
2,466 件の閲覧数
.NETでBootstrapのModalがOnClickイベント後に閉じてしまう。
ASP.NET C#にてWebアプリケーションを作成しています。
BootStrapのModalを使用しています。
モーダル表示用のボタンクリック時に
サーバ側処理でOnclickイベントを入れているのですが、
このイベント発生直後にモーダルが勝手に閉じてしまいます。
sample.aspx:modal表示ボタン
<input type="button" id="...
0
票
1回答
2,483 件の閲覧数
要素を横一列で並べたい。
営業時間のラベルから二つ目の時間入力までの要素を画面が小さくなっても横一列にしたいと思っていますが上手くいきません。画面を小さくすると、ラベルと入力のテキストボックスが縦に並んでしまいます。どう修正したらいいのか教えていただいてもよろしいでしょうか。
【コード】
<!DOCTYPE html>
<html lang="ja">
<head>
...
0
票
1回答
1,133 件の閲覧数
Timepickerが機能しない。
画面に「Timepicker」の機能を実装中ですが上手くいきません。
入力ボックスに「11:00 PM」という表示はでているのですがボタンを押そうとしても何も機能していない形です。ボタンをクリックして時間を選べるようにするにはどう修正したらよろしいでしょうか。
以前から使っている「http://getbootstrap.com/getting-started/#download」...
1
票
3回答
983 件の閲覧数
modal内の特定の要素の高さを取得したい
現在、modal.js の version3.3.6 を利用して、モーダル表示を行うページを作っています。
この画面にはボタンがあり、ボタンをクリックするとモーダルウィンドウが表示されます。
モーダルの中には<p>で包んだ文字列があり、知りたいのはこの要素の高さの取得法です。
現状、クリックイベントで
takasa = $("p").height();
...
0
票
1回答
307 件の閲覧数
パーシャルのパーシャルに変数を送る方法を教えてください。
前提・実現したいこと
パーシャルのパーシャルにコントローラーのインスタンス変数を送りたいです。
★発生している問題・エラーメッセージ
投稿のタイムラインをクリックすると、
Twitterのようなモーダルウィンドウが表示されるようにviewを作成しました。
モーダルウィンドウに表示されるview(コメントが追加されます) ≒ クリックした投稿です。
...
0
票
1回答
244 件の閲覧数
pagedown-bootstrap-railsでプレビューが表示されない。
前提・実現したいこと
pagedown-bootstrap-railsを実装したいです。
発生している問題・エラーメッセージ
プレビューが表示されません。
該当のソースコード
以下、実装手順とともに該当コードを記します。
【Gemfile】
gem 'bootstrap-sass'
gem 'font-awesome-rails'
gem 'simple_form'
gem '...
1
票
0回答
1,649 件の閲覧数
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回答
1,414 件の閲覧数
3
票
1回答
683 件の閲覧数
画面が小さくなっても要素を横一列に並んだままにしたい
Bootstrapを使ってログインID入力のみのログイン画面の作成を行っています。表示画面が小さくなってもユーザIDラベル、テキストボックス、submitボタンを横一列で表示するようにしたいのですが下記のコードではうまくいかず困っています。
どのようにコードを記載すればよろしいでしょうか。
自身が書いたソースは下記となります。
<!DOCTYPE html>
<...
0
票
1回答
619 件の閲覧数
ブラウザのサイズに依らずに画像を縦いっぱいに表示するには
質問させてください。
このサイトのようにブラウザのサイズがどんな高さであっても(スマホなども含みます)、ほぼ縦幅いっぱいに画像を表示したいと思います。
しかし自分のページでは、スマホでの表示時に横幅に依存してしまって縦の長さが短くなってしまいます。
どのようにCSSを書けばよいのか教えて頂けませんでしょうか?
宜しくお願い致します。
html {
font-size: 62....
0
票
1回答
1,837 件の閲覧数
要素中にある複数の要素を適宜折り返したい、ただし要素の途中で折り返さない
bootstrapのlabelを使っています。
これを複数横並びにしていますが、指定の親要素幅を超えると親要素幅が伸びてしまいます。
複数ある子要素を横並びにしつつ、適宜折り返したいです。ただし要素の途中で折り返したく有りません。要素単位で折り返したいです。
下記の例なら、label label-info指定の子要素を横並びにしますが、「データn」の途中で折り返さず、親要素幅以内で「データn」...
0
票
1回答
289 件の閲覧数
Twitterの様な投稿フォームを再現するには
railsもしくはbootstrapのライブラリを用いて、
このようにツイッターの新規投稿ボタン?を押すと画面が遷移せず、背景が暗くなり、フォームが
出てくる。という機能をつけたいのですが、そういったライブラリはあるのでしょうか?
もしあるのなら何と調べればいいのかご教授願いたいですm(__)m
0
票
1回答
1,130 件の閲覧数
Bootstrapテンプレートで、<select class=“form-control”> の角丸を四角にしたい
<select class="form-control" style="border-radius: 0!important;">
を指定しました。
MacのFirefoxでは四角になりましたが、MacのChromeでは角丸のままで変化がありませんでした。
知ってらっしゃる方、方法など教えてください。
よろしくお願いします。
0
票
1回答
428 件の閲覧数
zabuto calendarでクリックイベントをjsonの値によって変えたい
bootstrap(+jQuery)で動く,zabuto calendarというプラグインがあります。
デフォルトでの動きは,
(1)マンスリーカレンダー表示
(2)JSON形式のイベントデータがあると,該当日付に背景色を表示。クリッカブルになる。
(3)クリッカブル日付をクリックすると,モーダルウィンドウが降る。モーダルウィンドウ内には,JSONデータやHTMLを記述可能。...
0
票
1回答
394 件の閲覧数
行間を小さくするにはどうすれば良いでしょうか?
前提・実現したいこと
Ruby on rails ユーザー登録のフォームを作成中です。
Bootstrapを用いて作成しているのですが、
「パスワード」欄と「確認用パスワード」欄の間が
不自然に長くひらいてしまっております。
こちらをご参照下さい。
解決したいこと
この行間を縮めるためにはどのような方法がありますでしょうか?
何卒ご教示頂きたくお願い致します。
コード
app>...
0
票
1回答
1,129 件の閲覧数
kaminari + bootstrap の色を変えたい
rails で kaminari を用いてページネーションを実装しました。
rails g kaminari:views bootstrap でbootstrapを使ったデザインにしたのですが
cssから配色を変更しようとしています。
それで、文字色を変更するところまではできたのですが、
選択されているページ( http://bit.ly/1niuhcS の「1」のところ)の
...
0
票
0回答
1,174 件の閲覧数
RailsでBootstrapテンプレートを適用する方法
Ruby on Railsで開発をしています。
デザインのためにAdminLTE テンプレートを使おうとしています。
https://almsaeedstudio.com/
最初はgemで入れようとしましたが、gemを入れて設定まで記述されている資料があまりありませんでしたし、gemを入れて設定までしてもうまく適用されませんでした。
それで、ライブラリをダウンロードして、...