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

まとめ

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

Bootstrap3 formテキストフィールド横幅の指定の仕方的更多相关文章

  1. php实现远程网络文件下载到服务器指定目录(方法一)

    PHP实现远程网络文件下载到服务器指定目录(方法一) <?php function getFile($url, $save_dir = '', $filename = '', $type = 0 ...

  2. 【踩坑记录】 使用form标签的 reset() 方法报错原因及处理方法

    如果form标签内包含了 id 为 reset 的元素,在调用form的 reset() 方法时,会报xxx.reset is not a function,原因是在调用form的 reset() 方 ...

  3. [程序员代码面试指南]递归和动态规划-机器人达到指定位置方法数(一维DP待做)(DP)

    题目描述 一行N个位置1到N,机器人初始位置M,机器人可以往左/右走(只能在位置范围内),规定机器人必须走K步,最终到位置P.输入这四个参数,输出机器人可以走的方法数. 解题思路 DP 方法一:时间复 ...

  4. SpringMVC(二):RequestMapping修饰类、指定请求方式、请求参数或请求头、支持Ant路径

    @RequestMapping用来映射请求:RequestMapping可以修饰方法外,还可以修饰类 1)SpringMVC使用@RequestMapping注解为控制指定可以处理哪些URL请求: 2 ...

  5. FORM内置系统函数

    abort_query;                                                    停止查询的执行 add_group_column(record grou ...

  6. 细说 Form (表单)

    细说 Form (表单) Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源. 虽然Asp.net WebForms框架为了帮助 ...

  7. Asp,Net里的Form表单

    1.Form表单是页面与Web服务器交互过程中最重要的信息来源. 2.<form action="传到哪个页面的网站地址" method="post和get 两种方 ...

  8. 使用jQuery.form插件,实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  9. Form.action传值问题

    通过浏览器地址栏输入url并通过?传递参数请求资源时,?后面的参数叫做 "查询字符串",会触发后台Servlet的doGet(),因为通过浏览器地址栏直接访问的方式是GET方式. ...

随机推荐

  1. js prototype之诡异

    想必经常写js的人必然会经常性的用到prototype这个属性,我写这篇文章倒不是自己对prototype这个属性理解有多深刻,相反是因为自己理解肤浅,想通过写文章来加深理解.废话不多说.下面总结一下 ...

  2. 畅通工程续--hdu1874

    畅通工程续 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  3. 异步编程设计模式 - IronPythonDebugger

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using Microsof ...

  4. php跨服务器传递对象

    最近因为研究跨域名,跨服务器的问题,所以无聊,就想到了一个跨服务器传递对象的问题. 想要跨服务器传递数据,那么就要使用到get或者post提交. 我这里的方法有点复杂,但是因为平时工作时,有封装相应的 ...

  5. 在win7与XP系统下 C#缺省路径不同

    当我们加载文件时,若只输入文件名,在WIN7下默认是主程序所在文件夹路径 在XP下是上次本程序游览的有效路径 所以以后程序中尽量避免只传文件名

  6. 04747_Java语言程序设计(一)_第5章_图形界面设计(一)

    例5.1一个用JFrame类创建窗口的Java应用程序. import javax.swing.*; public class Example5_1 { public static void main ...

  7. Linux 通过HTTP进行域名更新

    一.3322动态域名更新接口 接口地址 API URL http://members.3322.net/dyndns/update HTTP请求 GET /dyndns/update?hostname ...

  8. hdu 5676 ztr loves lucky numbers(dfs+离线)

    Problem Description ztr loves lucky numbers. Everybody knows that positive integers are lucky if the ...

  9. qt反走样(简选)

    # -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' #qt反走样(简选) #概念 """ ...

  10. python小记列表排序

    a=[('b',4),('a',7),('c',2)] 正向排序a.sort() 反向排序:a.sort(reverse=True) 对第二关键字排序 a.sort(lambda x,y:cmp(x[ ...