質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1053閲覧

Bootstrapのファイル選択のレイアウトについて

abc30

総合スコア36

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/10/11 01:43

###前提・実現したいこと
ファイル選択のinputタグにbootstrapが当たらないので、
https://qiita.com/nakapython/items/46d44793827920282f75
のファイル名を表示する を参考にしてhtmlを書いたが、
イメージ説明
このようにならなかった。

###発生している問題・エラーメッセージ

今、ファイル選択のボタンを3つ用意していて、以下のようになっている。
イメージ説明

###該当のソースコード
htmlに

<form action="/accounts/upload_save/' method="POST" enctype="multipart/form-data"> {% csrf_token %}   <div class="input-group"> <label class="input-group-btn" style="width: 30%;"> <span class="btn btn-primary btn-lg"> ファイルを選択する① </span> </label>     <input type="file" class="form-control" name="image">   </div>   <div class="input-group"> <label class="input-group-btn" style="width: 30%;"> <span class="btn btn-primary btn-lg"> ファイルを選択する② </span> </label>     <input type="file" class="form-control" name="image2">   </div>      <div class="input-group"> <label class="input-group-btn" style="width: 30%;"> <span class="btn btn-primary btn-lg"> ファイルを選択する③ </span> </label>     <input type="file" class="form-control" name="image3">   </div> <div class="form-group"> <input type="hidden" value="{{ p_id }}" name="p_id" class="form-control"> </div> <div class="form-group"> <input type="submit" value="送信" class="form-control" style="width:30%;height:50px;font-size:25px;"> </div> </form>

と書いた。

###補足情報(言語/FW/ツール等のバージョンなど)
HTML5 Bootstrap3

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

参考にしたところでは、type="file"は非表示にしていて、別のファイル名表示用の領域が見えています。

HTML

1<input type="file" style="display:none">

また、全角スペースがあちこちに含まれているようですので、取り除いてみてください。

投稿2017/10/11 02:05

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

ザックリ書いたので、おかしいところもありますが、記事通りに書くと下記の様になると思いますが…
書き方があまり、記事に沿っていない様に見えるので見直してみてはいかがですか?

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>bootstrapTest</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link href="css/bootstrap.min.css" rel="stylesheet"> 8 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 9 <script src="js/bootstrap.min.js"></script> 10 <script> 11 $(document).on('change', ':file', function() { 12 var input = $(this), 13 numFiles = input.get(0).files ? input.get(0).files.length : 1, 14 label = input.val().replace(/\/g, '/').replace(/.*//, ''); 15 input.parent().parent().next(':text').val(label); 16 }); 17 </script> 18 </head> 19 <body> 20 <form action="/accounts/upload_save/" method="POST" enctype="multipart/form-data"> 21 <div class="input-group"> 22 <label class="input-group-btn" style="width: 30%;"> 23 <span class="btn btn-primary"> 24 ファイルを選択する① 25 <input type="file" name="image1" style="display: none"> 26 </span> 27 </label> 28 <input type="text" class="form-control" readonly=""> 29 </div> 30 <div class="input-group"> 31 <label class="input-group-btn" style="width: 30%;"> 32 <span class="btn btn-primary"> 33 ファイルを選択する② 34 <input type="file" name="image2" style="display: none"> 35 </span> 36 </label> 37 <input type="text" class="form-control" readonly=""> 38 </div>    39 <div class="input-group"> 40 <label class="input-group-btn" style="width: 30%;"> 41 <span class="btn btn-primary"> 42 ファイルを選択する③ 43 <input type="file" name="image3" style="display: none"> 44 </span> 45 </label> 46 <input type="text" class="form-control" readonly=""> 47 </div> 48 <div class="form-group"> 49 <input type="hidden" value="hogehoge" name="p_id" class="form-control"> 50 </div> 51 <div class="form-group"> 52 <input type="submit" value="送信" class="form-control" style="width:30%;height:50px;font-size:25px;"> 53 </div> 54 </form> 55 </body> 56</html>

投稿2017/10/11 01:55

motuo

総合スコア3027

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問