Bootstrap3 formテキストフィールド横幅の指定の仕方

 
Bootstrap3を使ってて、フォームの横幅を変えたいなって時ありませんか??

 
Bootstrap3のフォームの横幅のデフォルトはwidth:100%で設定されています。
ですので、普通にフォームを使用すると画面横いっぱいに広がってしまいます。

↓こんな感じ

Bootstrap3_テキストフィールドデモ

 
 
今日はそんなBootstrap3のテキストフィールドの横幅を2パターンの指定方法で変更してしまおうって話です。

プログラミングやWordPressを習得するのに一番近道な方法とは?

①styleでwidthを指定しちゃう!

はい、原始的に行きましょう。

実際使用する時はちゃんとクラスやIDを振ってもらうほうが良いかと思いますが、サンプルコードはそのままstyle指定しちゃってます。
あんま真似しないでね!

 
 

②Bootstrap3公式のdivクラスで指定しちゃう!

やっぱ決められた使い方が良い!?

公式を見るとこのような使い方を推奨してますね。
でもわざわざ2つのDIVで囲むのはちょいと面倒ですね笑

 
 

③inputクラスで指定しちゃう!

Bootstrap2ではこの方法が公式でしたが。。。

なぜかこの方法でやると横幅は変更されるのですが、テキストフィールドの形が角丸ではなく、四角形になってダサくなっちゃうんですよねー。
Bootstrap2ではspanクラスで指定出来たのに。

 
はい!上記3つの方法のデモページありますよー。

 

まとめ

テキストフィールドの横幅指定はちょいと面倒ですが、Bootstrap3公式のDivクラスで指定する方法が良いみたいですね。
しかしやっぱりちょいと面倒だと思った場合や微妙な長さを指定したい時は直接styleでwidth指定でも良いんじゃないでしょうか。
ダメ??

 
以上、本日も最後までお読み頂きありがとうございました。

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください