Question

我试图在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>

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

Answer 1

您将要使用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，因此将内容直接放在卡中将垂直放置。

如何将引导卡（class =“ card”）与内联复选框（class =“ form-check-inline”）结合使用。它似乎无法正常工作

1 个答案: