bootstrap_learning/0410_form_grid_based_width.html at master · akicho8/bootstrap_learning · GitHub

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
<!-- フォームの入力要素の横幅をグリッドに合わせるには？ -->
<!-- グリッドベースの横幅指定をするときは form-vertical にしておくと合わせやすい -->
<!DOCTYPE html>
<html lang="ja">
<html>
  <head>
    <meta charset="UTF-8" />
    <link href="assets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="container">
      <form class="form-vertical">
        <div class="control-group"><label class="control-label">span1</label><div class="controls"><input type="text" class="span1" /></div></div>
        <div class="control-group"><label class="control-label">span2</label><div class="controls"><input type="text" class="span2" /></div></div>
        <div class="control-group"><label class="control-label">span3</label><div class="controls"><input type="text" class="span3" /></div></div>
        <div class="control-group"><label class="control-label">span4</label><div class="controls"><input type="text" class="span4" /></div></div>
        <div class="control-group"><label class="control-label">span5</label><div class="controls"><input type="text" class="span5" /></div></div>
        <div class="control-group"><label class="control-label">span6</label><div class="controls"><input type="text" class="span6" /></div></div>
        <div class="control-group"><label class="control-label">span7</label><div class="controls"><input type="text" class="span7" /></div></div>
        <div class="control-group"><label class="control-label">span8</label><div class="controls"><input type="text" class="span8" /></div></div>
        <div class="control-group"><label class="control-label">span9</label><div class="controls"><input type="text" class="span9" /></div></div>
        <div class="control-group"><label class="control-label">span10</label><div class="controls"><input type="text" class="span10" /></div></div>
        <div class="control-group"><label class="control-label">span11</label><div class="controls"><input type="text" class="span11" /></div></div>
        <div class="control-group"><label class="control-label">span12</label><div class="controls"><input type="text" class="span12" /></div></div>
      </form>
    </div>
  </body>
</html>