4
票
どうして.containerで15pxして.rowで-15pxするのでしょうか?
.containerの中に.rowしか書かないのであれば、.containerで15pxして.rowで-15pxするのは無駄ですよね。
しかし、.containerは名前のとおり入れ物なので.row以外のものを入れることも多いです。例えば、下のような例を考えると、.containerで15pxして.rowで-15pxしていることによって、「タイトル」と「文章」とグリッド内の表示が自然に揃います。...
3
票
承認済み
Vue.jsとBootstrapを両方使うのはありですか
Bootstrap は CSS フレームワークですが、アラート、ドロップダウンやモーダルダイアログなど一部のコンポーネントは JavaScript により制御されています。このため、 Vue.js を導入すると Bootstrap と Vue.js の機能が競合し、正常に動作しない可能性があります。
そこで、この問題を解決するために BootstrapVue を用いることが出来ます。...
2
票
ハンバーガーメニューが開かない
チェックボックスにチェックが付いていない状態で、画面幅が 500px 以下のときにハンバーガーメニューを表示させたい、ということであれば、 :not 擬似クラスを用いてハンバーガーメニューが表示される条件を変更すれば良いと思います。
@media all and (max-width: 500px) {
#nav-input:not(:checked) ~ #nav-close {
...
2
票
ブラウザ幅を変更すると、inputが入力できなくなるときがある
select要素を囲うdiv要素に、col-xs-カラム数のclassが不足しているためではないでしょうか。
試しにcol-xs-12やcol-xs-6などを追加すると動作しました。
2
票
Bootstrap3のModalダイアログが動きません
まず、Bootstrap の Modal 機能には window.open を自動的に置き換える機能はありません。
$('#staticModal').modal();
この記述は、ダイアログとなる要素 #staticModal を表示するというものです。質問に書かれたHTMLには #staticModal に該当する要素がないようですから、ボタンを押しても何も起きないでしょう。
...
1
票
承認済み
ローカルでは動くが、リモート環境で動かない時に考えられる事は何でしょうか?
リモート環境でもコード通りに動くようになりました。
原因は、デプロイ後に
collectstaticコマンドをしていなかった事です。django-bootstrap-datepicker-plusはCSS関係と大きく関係しているので必要でした。
1
票
django-bootstrap-datepicker-plusを利用したフォームがうまく機能しない
下記のサイトページを参考にする事で解決できました(アイコンの表示に不具合残りますが、機能は果たしています。
https://monim67.github.io/django-bootstrap-datepicker-plus/configure/
質問で紹介した場合ですと、
event.htmlとlayout.htmlに変更を加える必要がありました。
event.html
{% ...
1
票
承認済み
jQueryの<script>内の記述とファイルの記述の違い
インラインスクリプト (<script> ~ </script>) や、 async, defer 属性または type="module" を持たない script 要素は、ブラウザがページの解析を続ける前に、読み込みと実行が行なわれます。
今回のスクリプトとファイルの読み込み箇所を見ると、 application.js は、...
1
票
承認済み
bootstrapのタブ内で要素を横並びに出来ない
Bootstrap により、.tab-pane に設定したスタイルが上書きされているためです。
.tab-pane には、現在アクティブなタブを表示させ、それ以外を非表示にするために、display: block, display: none のどちらかが適用されています。そのため、.tab-pane の display プロパティを常に flex に設定すると、...
1
票
承認済み
coverなのに画像の高さが無効化される
object-fitは高さを揃えるスタイルではなくて、ボックスその縦横に合わせてコンテンツをどう表示するかというプロパティです。
高さを揃えるプロパティではないのでそのコンテンツ自体もしくは囲うボックスに対して縦横を指定してやる必要があります。
object-fit
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit
cover
...
1
票
承認済み
HTMLテキストフィールドの高さを合わせる方法は?
これはCSSのFlexboxというスタイルが使用されているようです。
各inputフィールドは<div>でbox化されており、その親要素の<form>を見ると、display:flexというスタイルが適用されています。
これにより、<form>の子要素を横並びのレイアウトにすることができ、上辺の位置を合わせたようなスタイルになります。
以下サンプルです。
...
1
票
承認済み
1
票
Bootstrap Modal 内にAjaxで表示
phpfile.phpが POSTでフォームコントロールのデータを受けているなら、第2引数は文字列では無く、オブジェクトを第2引数で渡さないと phpfile.phpは結果データを返さないのではないかと思います。(.serialize()は文字列を返すのでGET渡しになる)
以下にオブジェクト渡し(POST送信)の例
$('#hoge .fuga').load("piyo.php", {...
1
票
bootstrap のmodal がiOSの端末でスクロール出来ない
モーダルということでposition: fixed;などを指定している可能性は高いと思いますし、
こちらのページを参考にスクロールしたい対象をさらにdivで囲むなどしてみてはいかがでしょうか?
iOS Safari で絶対位置指定された要素のスクロールが出来ない件
1
票
jqueryでtableの中身を上から読み込む(複数行)
addmtbl()が、どのような処理をしているか不明ですが、addmtbl()が単純に文字列を返す関数なら
.html(addmtbl(result))では エレメント内にaddmtbl(result)が返した文字列で、上書きしてしまいます。
回しながら追加するには、.append を使います。
例 $("#showltbl1").append(addmtbl(result));
$(...
1
票
承認済み
ブラウザ幅を変更すると、inputが入力できなくなるときがある
ここにcol-xs-を指定しなかった理由は何でしょうか。
<div class="col-sm-4 col-lg-4 edit-form">
<select class="form-control">
<option>aaa</option>
<option>bbb</option>
...
Only top scored, non community-wiki answers of a minimum length are eligible
関連するタグ
twitter-bootstrap × 26css × 12
html × 7
jquery × 7
javascript × 5
ruby-on-rails × 4
python3 × 2
django × 2
ajax × 2
python × 1
php × 1
ubuntu × 1
laravel × 1
vue.js × 1
cakephp × 1
nginx × 1
iphone × 1
array × 1
bootstrap × 1
ライセンス × 1
mit-license × 1
bootstrap4 × 1