好吧......我正在玩一个表格内的按钮，我想创建一个带有问题作为标签的表格和问题前面的3个单选按钮（不在下面），我想要按钮彼此分开（不是全部在一起）。我希望能够将每行内的单选按钮分组，以便我能够从每一行中选择一个选项。
这样的东西:(但没有实际的“（x）”，只有漂亮的btn）
question: (x)button button button
question: button (x)button button
所以我写了这个：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 2 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>
test
</title>
<!-- ~~~~~~~~~~~~~~~~~~~~~BOOTSTRAP~~~~~~~~~~~~~~~~~~~~~~~ -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
html
{
font-size: 62.5%;
}
body
{
font-size: 14px; font-size: 1.4rem;
}
</style>
</head>
<body>
<br/>
<br/>
<br/>
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="animal" class="control-label col-md-6">
Which of the following animals best describe you?
</label>
<!--no nned to add btn-group when inside a form-group-->
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-warning">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="animal" id="jaguar">
Jaguar
</div>
</label>
</div>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-primary">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="animal" id="dolphin">
Dolphin
</div>
</label>
</div>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-danger">
<div class="container-fluid" style="width: 7rem">
<input type="radio" name="animal" id="ant">
Ant
</div>
</label>
</div>
</div>
<hr/>
<div class="form-group">
<label for="romantic" class="control-label col-md-6">
Which of the following escenarios best describe your ideal romatic getaway?
</label>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-success">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="forest">
Forest
</div>
</label>
</div>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-warning">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="beach">
Beach
</div>
</label>
</div>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-info">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="house">
House
</div>
</label>
</div>
</div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!-- bootstrap scripts -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
这就是我想要的一切。但...
我注意到的第一件事是，当我从第一行开始第一个选择时，颜色变暗但当我点击第二行的第一个选项时，第一个选择再次清除。这让我怀疑，是不是第一行的单选按钮没有分组并从第二行分开？
然后在查看bootstrap信息时，我注意到我没有使用btn-group !!
...所以我说服自己，我只能从2行中选择一个无线电选项而且我绝对不想要那样!!!!!
但是我错了！当你在表格内部不需要btn-group时（因为你有形式组I reccon），实际上btn-group使得编辑位置和大小变得更加困难。
为了证明这里有一些示例代码，方面是非常基本的，因为我实际上并没有使用btn显示，但它证明没有btn-group径向按钮会根据表单组自动分组：
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="animal" class="control-label col-md-6">
Which of the following animals best describe you?
</label>
<!--Look ma no btn-group anywhere!!!!-->
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-warning">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="animal" id="jaguar">
Jaguar
</div>
</label>
</div>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-primary">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="animal" id="dolphin">
Dolphin
</div>
</label>
</div>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-danger">
<div class="container-fluid" style="width: 7rem">
<input type="radio" name="animal" id="ant">
Ant
</div>
</label>
</div>
</div>
<hr/>
<div class="form-group">
<label for="romantic" class="control-label col-md-6">
Which of the following escenarios best describe your ideal romatic getaway?
</label>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-success">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="forest">
Forest
</div>
</label>
</div>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-warning">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="beach">
Beach
</div>
</label>
</div>
<div class="col-md-2" data-toggle="buttons">
<label class="btn btn-info">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="house">
House
</div>
</label>
</div>
</div>
</form>
如果我尝试使用btn-group，显示器全部搞砸了。我玩这个配置很多，无法得到我想要的显示。这是使用btn-group的示例代码：
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="animal" class="control-label col-md-6">
Which of the following animals best describe you?
</label>
<!--no nned to add btn-group when inside a form-group-->
<div class="btn-group" data-toggle="buttons">
<div class="col-md-2">
<label class="btn btn-warning">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="animal" id="jaguar">
<span syle="width: 7rem;">Jaguar</span>
</div>
</label>
</div>
<div class="col-md-2">
<label class="btn btn-primary">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="animal" id="dolphin">
Dolphin
</div>
</label>
</div>
<div class="col-md-2">
<label class="btn btn-danger">
<div class="container-fluid" style="width: 7rem">
<input type="radio" name="animal" id="ant">
Ant
</div>
</label>
</div>
</div>
</div>
<hr/>
<div class="form-group">
<label for="romantic" class="control-label col-md-6">
Which of the following escenarios best describe your ideal romatic getaway?
</label>
<div class="btn-group" data-toggle="buttons">
<div class="col-md-2">
<label class="btn btn-success">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="forest">
Forest
</div>
</label>
</div>
<div class="col-md-2">
<label class="btn btn-warning">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="beach">
Beach
</div>
</label>
</div>
<div class="col-md-2">
<label class="btn btn-info">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="house">
House
</div>
</label>
</div>
</div>
</div>
</form>
总结...... wtf ???我是一个菜鸟，我绝不会声称btn-group在表单内部没用。事实上，我可能错了。但这种显示让我感到困惑，我无法找到使用btn-group AND的正确方法！按我想要的那样显示表格.....
表单组是否足以对径向按钮进行分组？
btn-group实际上对表单内部没有帮助吗？
有没有更好的方法将btn包含在表单中并尊重我描述的线框显示？
非常好，如果有人有答案我会很感激任何回复
答案 0 :(得分：0)
似乎工作正常，只是宽度不足以用于单选按钮。所以我改变了
<div class="col-md-2">
到
<div class="col-md-4">
注意：运行以下代码段并以全屏模式查看
html
{
font-size: 62.5%;
}
body
{
font-size: 14px; font-size: 1.4rem;
}
input[type=radio]{
visibility:hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="animal" class="control-label col-md-6">
Which of the following animals best describe you?
</label>
<!--no nned to add btn-group when inside a form-group-->
<div class="btn-group" data-toggle="buttons">
<div class="col-md-4">
<label class="btn btn-warning">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="animal" id="jaguar">
<span syle="width: 7rem;">Jaguar</span>
</div>
</label>
</div>
<div class="col-md-4">
<label class="btn btn-primary">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="animal" id="dolphin">
Dolphin
</div>
</label>
</div>
<div class="col-md-4">
<label class="btn btn-danger">
<div class="container-fluid" style="width: 7rem">
<input type="radio" name="animal" id="ant">
Ant
</div>
</label>
</div>
</div>
</div>
<hr/>
<div class="form-group">
<label for="romantic" class="control-label col-md-6">
Which of the following escenarios best describe your ideal romatic getaway?
</label>
<div class="btn-group" data-toggle="buttons">
<div class="col-md-4">
<label class="btn btn-success">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="forest">
Forest
</div>
</label>
</div>
<div class="col-md-4">
<label class="btn btn-warning">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="beach">
Beach
</div>
</label>
</div>
<div class="col-md-4">
<label class="btn btn-info">
<div class="container-fluid" style="width: 7rem;">
<input type="radio" name="romantic" id="house">
House
</div>
</label>
</div>
</div>
</div>
</form>
我认为这是你要去的那种显示器。