Question

我需要对齐复选框旁边的文本区域。

我的引导html是：

                    <div class="form-group row">
                        <div class="col-12 form-check">
                            <label class="col-3 col-form-label" for="check15">Filter "na" results</label>
                            <input id="check15" class="box15" type="checkbox">
                            <textarea class="col-3 form-control form-control-sm" rows="5" id="filter_na_results"></textarea>
                        </div>
                    </div>

由于某些原因，textarea出现在带有标签和复选框的行下。如何使textarea出现在与复选框同一行的复选框右侧？

这里也是JSFiddle。

Answer 1

删除表单控件类，并删除具有flex的div并将其更改为row。并在div行上添加align-items-start，以使其对齐到文本区域的顶部。

在标签上添加p-0类

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="form-group row">
  <div class="col-12 form-check">
    <div class="row align-items-start">
      <label class="col-3 col-form-label p-0" for="check15">Filter "na" results</label>
      <input id="check15" class="box15" type="checkbox">
      <textarea class="col-3 form-control-sm offset-3" rows="5" id="filter_na_results"></textarea>
    </div>
  </div>
</div>
</div>

Answer 2

.flex {
  display:flex;
  align-items:center;
}

textarea {
  height:50px;
  width:100px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="form-group row">
                            <div class="col-12 form-check">
                            <div class="flex">
                                <label class="col-3 col-form-label" for="check15">Filter "na" results</label>
                                <input id="check15" class="box15" type="checkbox">
                                <textarea class="col-3 form-control form-control-sm offset-3" rows="5" id="filter_na_results"></textarea>
                            </div>
                        </div>
                        </div>

在复选框CSS引导程序旁边对齐textarea

2 个答案: