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框架有什么好处?

bootstrap 为什么只能默认12列

bootstrap的轮播图怎么实现

bootstrap的优缺点是什么?

bootstrap icon不显示怎么办

bootstrap cdn是什么

bootstrap命令是什么意思

bootstrap怎么实现响应式布局

bootstrap 如何修改css样式

bootstrap table 查询实现

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




打赏

取消

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

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

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

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

评论

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