bootstrap中如何设置表单的宽高


本文摘自PHP中文网,作者尚,侵删。


您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。

下面的实例演示了这点:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<form role="form">

  <div class="form-group">

    <input class="form-control input-lg" type="text" placeholder=".input-lg">

  </div>

  <div class="form-group">

    <input class="form-control" type="text" placeholder="默认输入">

  </div>

  <div class="form-group">

    <input class="form-control input-sm" type="text" placeholder=".input-sm">

  </div>

  <div class="form-group"></div>

  <div class="form-group">

    <select class="form-control input-lg">

      <option value="">.input-lg</option>

    </select>

  </div>

  <div class="form-group">

    <select class="form-control">

      <option value="">默认选择</option>

    </select>

  </div>

  <div class="form-group">

    <select class="form-control input-sm">

      <option value="">.input-sm</option>

    </select>

  </div>

  <div class="row">

    <div class="col-lg-2">

      <input type="text" class="form-control" placeholder=".col-lg-2">

    </div>

    <div class="col-lg-3">

      <input type="text" class="form-control" placeholder=".col-lg-3">

    </div>

    <div class="col-lg-4">

      <input type="text" class="form-control" placeholder=".col-lg-4">

    </div>

  </div></form>

运行结果如下:

阅读剩余部分

相关阅读 >>

bootstrap sass 如何使用

bootstrap怎么设置背景图片自适应

bootstrap框架技术基础是什么

bootstrap怎么实现自适应

bootstrap是js框架吗

bootstrap table分页问题汇总【附答案&代码】

如何使用bootstrap实现年月日的时间选择

浅谈bootstrap blazor组件的使用方法

bootstrap主要是什么

bootstrap 输入框只读的设置方法

更多相关阅读请进入《bootstrap》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...