我在两张卡中嵌入了一个单选按钮。要将它们分组在一起，我将两张卡嵌套在btn组中。
效果很好，但是在小尺寸的显示器上布局会崩溃。
当它缩小到xs时，两列应填满整行，但不会发生。第二张卡片消失了，您无法滚动到它。
我做了很多尝试，但无法在小屏幕上运行。
当我省略单选组包装时，布局有效，但显然我的单选按钮不起作用。
<html>
<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>
<div class="container-fluid">
<div class="row">
<div class="col">
<!-- Grid row -->
<div class="row">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<div class="col-12 col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<h5 class="mb-4">Card Title 1</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fa fa-users light-blue-text"></i>
</div>
</div>
<p class="grey-text">Paragraph 1.</p>
<label id="label1" class="btn btn-secondary active" for="input1">
Radio1
<input type="radio" id="input1"
name="name1"
value="val1" checked>
</label>
</div>
</div>
</div>
<div class="col-12 col-lg-6 col-md-6 mb-lg-0 mb-4">
<div class="card">
<div class="card-body">
<h5 class="mb-4">Card title 2</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fa fa-user light-blue-text"></i>
</div>
</div>
<p class="grey-text">Card paragraph 2.</p>
<label id="label2" class="btn btn-secondary" for="radio2">
<input type="radio" id="radio2"
name="name1"
value="val2">
Radio 2</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
不起作用，但布局没有中断：
<html>
<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>
<div class="container-fluid">
<div class="row">
<div class="col">
<!-- Grid row -->
<div class="row">
<div class="col-12 col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<h5 class="mb-4">Card Title 1</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fa fa-users light-blue-text"></i>
</div>
</div>
<p class="grey-text">Paragraph 1.</p>
<label id="label1" class="btn btn-secondary active" for="newSurgery">
Radio1
<input type="radio" id="input1"
name="name2"
value="val1" checked>
</label>
</div>
</div>
</div>
<div class="col-12 col-lg-6 col-md-6 mb-lg-0 mb-4">
<div class="card">
<div class="card-body">
<h5 class="mb-4">Card title 2</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fa fa-user light-blue-text"></i>
</div>
</div>
<p class="grey-text">Card paragraph 2.</p>
<label id="label2" class="btn btn-secondary" for="radio2">
<input type="radio" id="radio2"
name="name2"
value="val2">
Radio 2</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
您的第二个片段运行良好，只是您在第一个标签上没有正确使用for属性，因此您需要单击实际的单选按钮以查看其工作原理。
如果将for属性从不存在的newSurgery更改为input1，它将按预期工作：
<label id="label1" class="btn btn-secondary active" for="input1">
<!-- not for="newSurgery"-->
Radio1
<input type="radio" id="input1" name="name2" value="val1" checked>
</label>
答案 1 :(得分：0)
我认为单选按钮与其周围的HTML元素没有任何关系。您只需要为他们起一个相同的名字：
<input type="radio" id="input1" name="HAVE_TO_BE_THE_SAME" value="val1" checked />
<input type="radio" id="input2" name="HAVE_TO_BE_THE_SAME" value="val2" />
name将单选按钮组合在一起。您可以使用不同的id和value。标签for属性指向元素的id，而不是名称。
您有太多不必要的行和列标记。尝试再阅读一次引导文档。
<div class="container-fluid">
<div class="row">
<!--
By default, the div is displayed as block so you don't need
`col-12` unless they're not displayed as block and you force them
to.
-->
<div class="col-md-6">
<div class="card"> ... </div>
</div>
<div class="col-md-6">
<div class="card"> ... </div>
</div>
</div>
</div>