时间戳

首页 > 解决方案 > 如何将引导卡 (class="card") 与内联复选框 (class="form-check-inline") 结合使用。它似乎无法正常工作

bootstrap-4 - 如何将引导卡 (class="card") 与内联复选框 (class="form-check-inline") 结合使用。它似乎无法正常工作

问题描述

我试图在 Bootstrap 4 中将“卡片”类与表单结合起来。该表单包含两个复选框。它们应该并排显示（类“form-check-inline”）

我使用 w3schools 的示例代码来设置带有内联复选框的表单。一切正常。复选框按预期并排显示。然后我将它封装在一个卡片类中。之后复选框显示在另一个之上

<div class="container">
<h2>Form control: inline checkbox</h2>
<p>The form below contains two inline checkboxes:</p>
<form action="/action_page.php">
<div class="card" style="margin-top:2%">
<div class="card-header">
Test
</div>
<div class="form-check-inline">
<label class="form-check-label" for="check1">
<input type="checkbox" class="form-check-input" id="check1" 
name="vehicle1" value="something" checked>Option 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="check2">
<input type="checkbox" class="form-check-input" id="check2" 
name="vehicle2" value="something">Option 2
</label>
</div>
</div>      
</form>
</div>

这是卡类的问题还是我做错了什么？

标签： bootstrap-4

解决方案

你会想要使用card-body...

      <div class="card">
            <div class="card-header">
                Test
            </div>
            <div class="card-body">
                <div class="form-check-inline">
                    <label class="form-check-label" for="check1">
                        <input type="checkbox" class="form-check-input" id="check1" name="vehicle1" value="something" checked="">Option 1
                    </label>
                </div>
                <div class="form-check-inline">
                    <label class="form-check-label" for="check2">
                        <input type="checkbox" class="form-check-input" id="check2" name="vehicle2" value="something">Option 2
                    </label>
                </div>
            </div>
      </div>

https://www.codeply.com/go/6CVUqA6mD3

该类card将display:flex flex-direction:column内容直接放在卡片内将垂直布局。

推荐阅读