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

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

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

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

22711閲覧

Bootstrapのinputの長さを調整する

dobashi

総合スコア16

Bootstrap

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2021/02/23 08:47

編集2021/02/23 10:02

Bootstrapのinputの長さを調整したいのですができません。
.col-sm-のクラスを指定するとネットで見つけたのですが、反映されません。

作っているサイトは、こちらです。
http://spiritualcompany.net/portfolio/site2/index.html

このサイトの一番下のメールアドレスとある下のinputです。

html

1 <div class="sixth container-fluid"> 2 <div class="row"> 3 <div class="col-md-6"> 4 <h2>売上アップをする準備はできましたか?</h2> 5 <p> 6 どんな業種でも、インターネットを通じて売上アップを 実現することができます。弊社にぜひ、サポートをさせて 下さい。 7 </p> 8 <form> 9 <div class="mb-3"> 10 <label for="exampleInputEmail1" class="form-label">メールアドレス</label> 11 <input type="email" class="form-control .col-md-2" id="exampleInputEmail1" aria-describedby="emailHelp"> 12 <button type="submit" class="btn btn-danger">はじめる</button> 13 </div> 14 </form> 15 </div> 16 <div class="col-md-6"> 17 18 </div> 19 20 </div>

どうやって、inputの幅をもっと短くすることができるのでしょうか?

Bootstrapのバージョンは、bootstrap@5.0.0-beta1です。

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

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

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

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

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

m.ts10806

2021/02/23 09:44

Bootstrapのバージョンを、 マイナーバージョンも含めて提示してください。 ※過去質問で指摘されたかもしれませんが、それと関連があるか赤の他人にはわかりませんし、 初めて見る人には余計に分かりません(過去に回答した人でも覚えていることの方が少ないです)
dobashi

2021/02/23 10:04 編集

失礼致しました。 bootstrap@5.0.0-beta1です。質問にも追加しました。 .col-md-2、間違いですね。 col-md-2にしましたが、やはり長さは変わりません。
guest

回答1

0

ベストアンサー

デベロッパツールで確認してみると分かりますが、様々な影響を受け、col-md-2は無効になっています。
イメージ説明

理由としては.form-controlのwidth:100%で上書きされているため。
なので、その.form-controlの特性を逆手に取り、inputに直接指定するのではなく、ブロックの中に入れます。

html

1<div class="col-md-2"> 2 <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> 3</div> 4

「そういう広さのブロック」に入れてしまえば、その広さがinputにとっての100%になるわけです。

ブロックを作らなくても、別途広さ用のクラスを自前で用意すればinputに直接指定してもいけます。

css

1.w20{ 2 width:20%; 3} 4

html

1<input type="email" class="form-control w20" id="exampleInputEmail1" aria-describedby="emailHelp">

私はどちらかというとこの手法。

投稿2021/02/23 10:46

m.ts10806

総合スコア80875

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

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

dobashi

2021/02/23 11:09

m.ts10806さん、詳細に説明ありがとうございます。 ディベロッパーツールの生かし方も学べました。 上書きされていたのですね。 教えて頂いた通りにしたら、短くできました。 ありがとうございます。
m.ts10806

2021/02/23 11:12

inputの長さのためだけのためにcol使うのはあまり賢明ではないかもしれません。
dobashi

2021/03/03 10:17

時間が過ぎてしまいすみません。 colを使わないで、教えていただいたwidth:20%;で指定すればいいということでしょうか? 自分のコードのcol-md-6の中にわざわざ入れなくてもいいということでしょうか?
m.ts10806

2021/03/03 10:50

解決したのでは? colはあくまでグリッドレイアウトなので「長さ」ではなく「ブロック」を管理するものです。 空白のブロックを入れるのはあまり意味がないとは思います。
dobashi

2021/03/03 11:18

解決したのですが、別の質問になってしまい申し訳ありません。 colの右側に空白を作りたい場合は、空白のcolではなく、 width:50%とかを使えばいいということでしょうか?
m.ts10806

2021/03/03 11:19

回答に書いてますが。。。
dobashi

2021/03/03 11:23

失礼しました。 確認で同じことを書いてしまいました。 col1は、ブロックを制御するもので、空白を作るためではないとのこと 勉強になりました。 ありがとうございます。
m.ts10806

2021/03/03 11:24

col1云々より「グリッドレイアウト」という概念から見てあげてください。
dobashi

2021/03/03 12:02

グリッドレイアウトですね。ありがとう御座います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.39%

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

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

質問する

関連した質問