Bootstrapのw-70が効かない理由

前提・実現したいこと

Bootstrapを用いてAirbnbサイトの模写コーディングをしています。
width幅を調整していた時に不明点が出てきたのでご質問させていただきます。

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

どうして　w-70　が効かないのか。

該当のソースコード

BOOTSTRAP
1<div class="form-group　w-70">
2　　<select class="form-control" id="exampleFormControlSelect1">
3　　　　　<option>まるまる貸切 </option>
4　　　　　<option>個室</option>
5　　　　　<option>シェアルーム</option>
6　　</select>
7</div>

下記のコードで対処できたのですが、どうして上記のコードでは効かないのかわかりません。

<div class="form-group"　style="width: 70%;> 　　<select class="form-control" id="exampleFormControlSelect1"> 　　　　　<option>まるまる貸切 </option> 　　　　　<option>個室</option> 　　　　　<option>シェアルーム</option> 　　</select> </div>

補足情報（FW/ツールのバージョンなど）

ご回答いただけると助かります。

退会済みユーザー

2019/11/26 15:59

Bootstrapのバージョンが異なっているのでは？

行動規範の内容に同意します

回答2件

ベストアンサー

まず、class 属性の値はスペース区切りでなければいけません。ここでいうスペースは半角空白文字や改行文字などであり、全角空白は含みません。
https://html.spec.whatwg.org/multipage/dom.html#global-attributes:set-of-space-separated-tokens
https://momdo.github.io/html/dom.html#global-attributes:set-of-space-separated-tokens

Bootstrap が用意しているのは w-25 w-50 w-75 w-100 w-auto のみで、w-70 はありません。必要であれば追加してください。
https://getbootstrap.com/docs/4.3/utilities/sizing/#relative-to-the-parent

投稿2019/11/27 00:54

編集2019/11/27 00:56