次のタグが付いている話題の回答:

2
Accepted

要素中にある複数の要素を適宜折り返したい、ただし要素の途中で折り返さない

table要素はデフォルト(table-layout: auto)では表の全てのセルを考慮して幅を決定します。この時 「折り返しを考慮しても中身が枠をはみ出ない幅」 が、親要素の幅や、テーブル自身に指定された width CSSプロパティを超えていた場合、それらの値を無視して「折り返しを考慮しても中身が枠をはみ出ない幅」がテーブルの幅となります。これが今回の現象です。 ...
unarist's user avatar
  • 1.5万
2

Timepickerが機能しない。

bootstrap-timepickerのlinkタグにrel="stylesheet"属性を指定していないためです。 以下のように指定すると動作します。 $('#timepicker1').timepicker(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">...
andou's user avatar
  • 669
2

チェックボックスを扱って時間を変更したい。

Timepickerの時間を設定するのに、setTimeを利用してください。 詳しくは、ここに参照してください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" ...
Yang  Wenxuan's user avatar
2

rails g kaminari:views bootstrap3が実行できない

状況整理: エラーメッセージをよく見ると、実際の処理を実行せんとして 失敗しているファイルとその該当行が出力されているのがわかります(ファイルパス:該当行 形式) /usr/local/rvm/gems/ruby-2.3.0/gems/kaminari-core-1.0.1/lib/generators/kaminari/views_generator.rb:114 あと、理由として、...
gouf's user avatar
  • 126
2

Bootstrapのドロップダウンが開かないことがある

自己解決 gemですでに導入してるのにもかかわらずcdnでも導入してしまったのが原因でした。
you's user avatar
  • 21
2

bootstrap でnavbar が正しく表示されません

スクリーンショットを見る限り、bootstrapの前にhtmlについて勉強する必要があります。特に<html>タグや<body>タグの役割といった基礎の基礎の知識が足りてないように見受けられます。 とりあえずの解決策としては、全てのコンテンツは</body>の手前に書く必要があります。
sayuri's user avatar
  • 4.2万
2
Accepted

Rails6 webpacker から bootstrap js を使う方法

require して返り値を受け取ってないからでは無いでしょうか。 const bootstrap = require(“bootstrap”); console.log(bootstrap.Tab); みたいにすると大丈夫そうな気がします。 ところで今後はes6の文法で書く方がより良いと思います。 公式にも下記のような書き方が推奨されてます。 import * as bootstrap ...
user1006153's user avatar
2
Accepted

RSpec+CapybaraでBootstrap 4のドロップダウンをテストする方法

「ナビゲーションバーの中にあるドロップダウンをクリックして表示されたドロップダウンメニュー」はJavaScriptを使って実現されているはずです。 なので、RSpecの中でもJavaScriptを使う必要があります。 selenium-webdriverやPoltergeistといったgemを導入するとRSpec内でもJSが有効になります。 (僕はPoltergeistをよく使います) ...
Junichi Ito's user avatar
  • 6,621
2

使っているデバイスによってbackground-sizeを変えたい

メディアクエリを使ってブラウザーのビューポートの幅で切り替えるのが一般的です。 たとえばスマートフォン用の指定は下記を追加します @media (max-width: 575.98px) { .top-main { background-size: cover; } }
gotoken's user avatar
  • 306
2
Accepted

Bootstrapでhover時に他のアイコンに変えたい

Bootstrap Icons v1.9.1 を使われているようですが、bi-1-circle-fillにはバグがあり、v1.10.0で修正されています。v1.10.0以降を使いましょう。 加えて設定しているCSSセレクタも間違っています。まず、bi-i-circle(アイ)ではなくbi-1-circle(イチ)です。更に::before疑似要素のcontentスタイルを変更する必要があります。 ...
sayuri's user avatar
  • 4.2万
2
Accepted

Bootstrapでhover時に他のアイコンへ変えたい

https://ja.stackoverflow.com/a/96867/4236 でも例示しましたが、変えるべきスタイルは content だけで十分です。今回、 background-color まで変えてしまったために黒くなっています。 .bi-person:hover::before { content: '\F4DA'; } .bi-bag:hover::before { ...
sayuri's user avatar
  • 4.2万
1
Accepted

隔離スコープのパラメータが同期されない

詳細がわからないため推測になりますが、以下のどちらかではないでしょうか。 異なるスコープでshowが定義されており、scope.toggleによる切り替えで期待したスコープのshowの値が変更されていない DatepickerのshortcutPropagationの設定が考慮されていない 補足: 1....
maot's user avatar
  • 1,012
1

CSSにおいて正方形に余白がある状態にしたい

以下のやり方でできました。 ▼HTML <section class="testimonials"> <div class="flex-container"> <ul> <li><img src="...
user40231's user avatar
  • 325
1

CSSにおいて画像を上下に5つずつ配置したい

以下のコードでできました。 ▼HTML <div class="flex-container"> <ul> <li><img class="testimonials-img" src="img/blog/1.jpg" alt=&...
user40231's user avatar
  • 325
1

HTML,CSSによるデザインで要素の高さを70%にしたい

.section-box .box-white { padding: 50px 10%; background: #fff; -webkit-box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08); box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08); } にすることで高さをだいたい70%...
user40231's user avatar
  • 325
1

Bootstrapのdatatables内におけるselectボックスにデータを挿入する場合について。

ListAのrenderにて<option>を含んだ<select>の文字列を返せばいいのでは? とりあえずListAに配列が来ると仮定してデモを作りました。 $('#tbl').DataTable({ searching: false, sort: false, paging: false, data: [ {...
sigh's user avatar
  • 628
1

BootstrapのModalで別htmlの読み込みができましたが、読み込む要素を指定したい

仮に、Lab6.htmlの内容が以下のとき <html> <body> <h1>test</h1> <div class="panel-body">これそれあれ</div> <div>hoge</div> </body> </html>  div ...
yyz's user avatar
  • 1,837
1
Accepted

.NET MVC ViewからControllerへのbootstrap toggleの状態渡しについて

JavaScriptで値が変化する際のイベント(onlickなど)を監視し、AJAXと呼ばれる手法でリクエストを送信し、結果を受け取ることができます。ASP.NET MVCの場合はjQueryを使用して <script> $("#cbOnOff").click(function(e){ $.ajax({ url: '@Url....
pgrho's user avatar
  • 1.4万
1

.NET MVC ViewからControllerへのbootstrap toggleの状態渡しについて

ASP.NETの標準的な方法では、同名の<input type="hidden" />をチェックボックスより後ろに配置し、checkboxにTrue、hiddenにFalseを指定します。 <input type="checkbox" name="cbOnOff" value="True" /> <input type="hidden" name="cbOnOff" ...
pgrho's user avatar
  • 1.4万
1

画面のテーブルに対して行選択するコードの書き方について。

class(dataとfilename)とattribute(flag)を付加してサンプルを書いてみました。 色々な方法がありますが、こんな感じでしょうか。 選択行を取得ボタンの処理結果はconsole.logへ出力しました。 $(function(){ $('.data').on("click",function(){ var ...
yyz's user avatar
  • 1,837
1

モーダル画面内の入力値が文字化けする(TOMCATによる文字化け)

色々と調べた結果Tomcat5.X以降においてGET時に日本語が文字化けするとのことでした 参照 http://ameblo.jp/spring-beginner/entry-10429339939.html そこでサーバー側(私の場合、Eclipseのテスト用TOMCAT7)のserver.xmlの以下のパラメータに以下の項目を追加したら治りました。 <Connector ...
toshi5506's user avatar
1

AngulerJSでのモーダル画面表示

全体的に$modalではなく$uimodalでした また最初に app.controller("controller", ['$scope', '$http','$uibModal', function($scope, $http, $uibModal ) と定義しておいく必要があることがわかりました。 実際につかうときは var modalInstance = $uibModal.open(...
toshi5506's user avatar
1
Accepted

.NETでBootstrapのModalがOnClickイベント後に閉じてしまう。

onserverclickなのでポストバックが発生し、ページ全体またはUpdatePanelが再読み込みされてBootstrapによるモーダルの表示を打ち消しているのでしょう。ですのでUpdatePanelのトリガーとして問題のボタンを登録する必要があります。対象の<asp:UpdatePanel>に <asp:UpdatePanel ID="UpdatePanel2" ...
pgrho's user avatar
  • 1.4万
1

要素を横一列で並べたい。

.form-inline .input-group { display: inline-table; vertical-align: middle; } 横並びのときは上記のCSSが効いているので、これをメディアクエリ外に書いても効くのですが、ほかに影響が出るとまずいので、 .input-group.timepicker { display: inline-table; ...
gin's user avatar
  • 106
1

modal内の特定の要素の高さを取得したい

回答の内容は@pgrho さんと同じですが、サンプルを投稿します。 (コメントとして追加しようとしましたが、まだ権限が足りなかったため回答として投稿) $('#myModal').on('shown.bs.modal', function (e) { var takasa = $('p').height() alert(takasa); }); <script ...
andou's user avatar
  • 669
1

bootstrapでtableの縦線を消す方法について

以下はBootstrap 3 の基本的なテーブルを公式のドキュメントより引用したものです。 縦線は存在しませんが、これで解決できませんか? <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <table class=...
hinaloe's user avatar
  • 4,701
1
Accepted

画面が小さくなっても要素を横一列に並んだままにしたい

多少デザインが変わりますが、このような感じではいかがでしょう? <div class="container" style="padding:20px 0"> <form class="form-inline" style="margin-bottom:15px;"> <div class="form-group"> ...
gin's user avatar
  • 106
1

Twitterの様な投稿フォームを再現するには

Modals をベースにフォームやボタンを追加すると、同じような画面を実装できます。
yasu's user avatar
  • 4,413

Only top scored, non community-wiki answers of a minimum length are eligible