zoukankan      html  css  js  c++  java
  • Bootstrap3 formテキストフィールド横幅の指定の仕方

    Bootstrap3を使ってて、フォームの横幅を変えたいなって時ありませんか??
    Bootstrap3のフォームの横幅のデフォルトは100%で設定されています。
    ですので、普通にフォームを使用すると画面横いっぱいに広がってしまいます。

    こんな感じ

    1
    2
    3
    <form>
        <input type="text" class="form-control" placeholder="テキストフィールド">
    </form>

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

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

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

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

    1
    2
    3
    4
    <form>
        <!-- widthで指定 -->
        <input style="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クラスで指定出来たのに。
    はい!上記3つの方法のデモページありますよー。

    まとめ

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

  • 相关阅读:
    LinqPad 1.31 提供下载
    LINQ to SQL更新数据库操作
    电脑开机进入桌面很慢的解决办法
    VS2008的Linq更新数据就那么费劲
    将图片进行base64编码,并将接受编码后的图片转换为实际图片
    C# 2.0 之 static class
    测试杀毒软件的性能代码
    VS2008 Ajax Toolkit 控件(修正后转载)
    C#发送邮件程序 及测试邮件服务器
    asp.net中的<%%>形式的详细用法实例讲解
  • 原文地址:https://www.cnblogs.com/vonk/p/4238232.html
Copyright © 2011-2022 走看看