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

【问题标题】：Bootstrap: form-group vs input-group, what is the difference?Bootstrap：form-group vs input-group，有什么区别？
【发布时间】：2016-03-18 12:07:36
【问题描述】：

在 bootstrap v3 中，form-group 和 input-group 类之间有什么区别，您什么时候使用其中一个？我一直在围绕几个文本输入使用 form-group，当我将外部 div 中的类从 form-group 切换到 input-group 时，似乎没有任何变化。

我已经尝试寻找两者之间的区别，但除了this snippet on the bootstrap website 说：

不要将表单组直接与输入组混合。相反，将输入组嵌套在表单组内。

但是，它上面的表单组示例并没有在其中使用输入组，所以我很困惑它适合什么地方以及何时使用它。谢谢。

【问题讨论】：

Inline Form examples (v3.3 docs) 中的“转账现金”示例就在 OP 引用的文档部分下方，这两个示例都很好。另外nice answer over here 在此问题之后发布的重复问题。

标签： twitter-bootstrap

【解决方案1】：

我知道这是旧的，但我有同样的问题。当您想在输入字段周围包装标签时使用输入组，例如，如果您想添加货币符号或添加一些十进制数字。否则不需要输入组：

<div style = "padding: 100px 100px 10px;">
   <form class = "bs-example bs-example-form" role = "form">         
      <div class = "input-group">
         <span class = "input-group-addon">$</span>
         <input type = "text" class =" form-control">
         <span class = "input-group-addon">.00</span>
      </div>
   </form>
</div>

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

【讨论】：

【解决方案2】：

<!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>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<div class="row ">
		
		<div >

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

<!-- Form Name -->
<legend>Form Name</legend>
<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-2 control-label" for="selectbasic">Select Basic</label>
  <div class="col-md-10">
    <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>
  </div>
</div>


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

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

  <label class="col-md-2 control-label" for="radios">Inline Radios</label>
  <div class="col-md-2"> 
    <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> 
  </div>
</div>

  

</fieldset>
</form>
		</div>
		
	</div>
</div>
         


</body>
</html>

【讨论】：