Bootstrap3を使ってて、フォームの横幅を変えたいなって時ありませんか？？
Bootstrap3のフォームの横幅のデフォルトはwidth:100%で設定されています。
ですので、普通にフォームを使用すると画面横いっぱいに広がってしまいます。
こんな感じ
1 2 3 | <form> <input type="text" class="form-control" placeholder="テキストフィールド"> </form> |
今日はそんなBootstrap3のテキストフィールドの横幅を2パターンの指定方法で変更してしまおうって話です。
①styleでwidthを指定しちゃう！
はい、原始的に行きましょう。
1 2 3 4 | <form> <!-- widthで指定 --> <input style="width:150px;" type="text" class="form-control"> </form> |
実際使用する時はちゃんとクラスやIDを振ってもらうほうが良いかと思いますが、サンプルコードはそのままstyle指定しちゃってます。
あんま真似しないでね！
②Bootstrap3公式のdivクラスで指定しちゃう！
やっぱ決められた使い方が良い！？
1 2 3 4 5 6 7 8 | <form> <!-- クラスで指定 --> <div class="row"> <div class="col-xs-3"> <input type="text" class="form-control"> </div> </div> </form> |
公式を見るとこのような使い方を推奨してますね。
でもわざわざ2つのDIVで囲むのはちょいと面倒ですね笑
③inputクラスで指定しちゃう！
Bootstrap2ではこの方法が公式でしたが。。。
1 | <input class="col-xs-2" type="text" class="form-control"> |
なぜかこの方法でやると横幅は変更されるのですが、テキストフィールドの形が角丸ではなく、四角形になってダサくなっちゃうんですよねー。
Bootstrap2ではspanクラスで指定出来たのに。
はい！上記３つの方法のデモページありますよー。
まとめ
テキストフィールドの横幅指定はちょいと面倒ですが、Bootstrap3公式のDivクラスで指定する方法が良いみたいですね。
しかしやっぱりちょいと面倒だと思った場合や微妙な長さを指定したい時は直接styleでwidth指定でも良いんじゃないでしょうか。
ダメ？？
以上、本日も最後までお読み頂きありがとうございました。