我希望有一个Bootstrap可切换的按钮组来显示/隐藏相关内容，而不是水平单选按钮。
从本质上讲，它将成为一个由3-4个问题组成的表格，最终显示正确的答案/按钮(将有4个答案可供选择(。
如何在CSS中实现这一点？
#immigrant:checked~.conditional,
#required-2:checked~.conditional #option-2:checked~.conditional {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.control:not(:checked)~.conditional,
#immigrant:not(:checked)~.conditional,
#required-2:not(:checked)~.conditional,
#option-2:not(:checked)~.conditional {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<form action="">
<label class="btn btn-primary" for="citizen">
<input type="radio" name="residency" value="Citizen" id="citizen"> Citizen</label>
<p class="conditional">Test Paragraph for Citizens - *Needs to be hidden*</p>
<input type="radio" name="residency" value="Immigrant" id="immigrant">
<label class="btn btn-primary" for="immigrant">Immigrants</label>
<p class="conditional">Test Paragraph for Immigrants</p>
</form>https://jsfiddle.net/yqpudt31/1/
标记的工作方式与为其他复选框提供标记的方式不同。实际上，您必须将<p>放在<label>中，使其成为checkbox的同级，才能应用样式。
这是我能得到的最接近的。这有点粗糙，但它有效。我想知道你为什么在元素上使用所有这些属性来隐藏和显示它们。您只需要display: none和display: block来切换它们。
.control:checked~.conditional,
#immigrant:checked~.conditional,
#required-2:checked~.conditional,
#option-2:checked~.conditional {
display: block;
}
#citizen:checked~.conditional {
position: absolute;
left: 0px;
top: 46px;
color: #000000;
}
.control:not(:checked)~.conditional,
#immigrant:not(:checked)~.conditional,
#required-2:not(:checked)~.conditional,
#option-2:not(:checked)~.conditional,
#citizen:not(:checked)~.conditional {
display: none;
}<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<form action="">
<label class="btn btn-primary" for="citizen">
<input type="radio" name="residency" value="Citizen" id="citizen"> Citizen
<p class="conditional">Test Paragraph for Citizens - *Needs to be hidden*</p>
</label>
<input type="radio" name="residency" value="Immigrant" id="immigrant">
<label class="btn btn-primary" for="immigrant">Immigrants</label>
<p class="conditional">Test Paragraph for Immigrants</p>
</form>
</body>