Bootstrap：form-group vs input-group，有什么区别？


Bootstrap: form-group vs input-group, what is the difference?

我是Bootstrap的新手(通常是前端开发)，所以请原谅我的无知。

在bootstrap v3中，form-group和input-group类之间有什么区别，何时使用一个或另一个？我一直在围绕几个文本输入使用表单组，当我将外部div中的类从表单组切换到输入组时，反之亦然，

我已经尝试搜索两者之间的差异，但是除了引导网站上的以下代码片段没有显示太多内容之外，没有出现太多内容：Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.但是，其上方的表单组示例未使用输入组在其中，因此我很困惑它的适用位置和使用时间。谢谢。

我知道这很老，但是我有同样的问题。当您要将标签环绕在输入字段周围时，将使用输入组，例如，如果要在货币符号前添加前缀或在某些十进制数字后添加前缀。否则不需要输入组：

1
2
3
4
5
6
7
   <form class ="bs-example bs-example-form" role ="form">        
     
         <span class ="input-group-addon">$</span>
         <input type ="text" class =" form-control">
         <span class ="input-group-addon">.00</span>
     
   </form>

源-http://www.tutorialspoint.com/bootstrap/bootstrap_input_groups.htm

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</head>
<body>

\t
\t\t
\t\t

<form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>Form Name</legend>
<!-- Select Basic -->

  <label class="col-md-2 control-label" for="selectbasic">Select Basic</label>
 
    <select id="selectbasic" name="selectbasic" class="form-control">
      <option value="1">Option one</option>
      <option value="2">Option two</option>
      <option value="3">Option three</option>
    </select>
 



<!-- Text input-->

  <label class="col-md-2 control-label" for="textinput">Text Input</label>  
 
  \t<input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md">
 

 <label class="col-md-2 control-label" for="textinput">Text2 Input</label>  
 
  \t<input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md">
 
 
 
<!-- Multiple Radios (inline) -->

  <label class="col-md-2 control-label" for="radios">Inline Radios</label>
   
    <label class="radio-inline" for="radios-0">
      <input type="radio" name="radios" id="radios-0" value="1" checked="checked">
      Yes
    </label>
    <label class="radio-inline" for="radios-1">
      <input type="radio" name="radios" id="radios-1" value="2">
      No
    </label>
 


 

</fieldset>
</form>
\t\t
\t\t
\t

         


</body>
</html>