Bootstrapのinputの長さを調整する

Question

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

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

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

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

        </div>        

      </div>

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

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

Comments

[m.ts10806]

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

[m.ts10806]

そもそも
.col-md-2
とHTMLに指定するのは間違いですね。[ ..col-md-2 ]というクラスが定義されているのならあるかもしれませんが、CSSでは[.]は名称に使えなかったはず。
https://groups.google.com/g/html5-developers-jp/c/7ABMfig0n4M?pli=1

[dobashi]

失礼致しました。
bootstrap@5.0.0-beta1です。質問にも追加しました。

.col-md-2、間違いですね。
col-md-2にしましたが、やはり長さは変わりません。

Answer 1

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

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

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

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

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

.w20{
  width:20%;
}

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

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

Comments

[dobashi]

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

教えて頂いた通りにしたら、短くできました。
ありがとうございます。

[m.ts10806]

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

[dobashi]

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

[m.ts10806]

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

[dobashi]

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

[m.ts10806]

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

[dobashi]

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

ありがとうございます。

[m.ts10806]

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

[dobashi]

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

[m.ts10806]

ドキュメント読みましょう。
https://getbootstrap.com/docs/5.0/layout/grid/

[dobashi]

はい!