Question

我有以下代码

<div class="row">

        <div class="col-md-2">
            <div class="custom-control custom-checkbox my-auto" style="display: inline; align-items: center;">
              <input class="custom-control-input" id="customCheck2" type="checkbox" checked >
              <label class="custom-control-label" for="customCheck2"></label>
            </div>
        </div>

        <div class="col-md-10">
            <div class="progress-wrapper mt-1 pt-0">
              <div class="progress-info">
                <div>
                  <span>5 Sterne</span>
                </div>
                <div class="progress-percentage">
                  <span style="font-size: 12px">65%</span>
                </div>
              </div>
              <div class="progress">
                <div class="progress-bar bg-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
              </div>
            </div>
        </div>

    </div>

我的问题是，此复选框未垂直居中，如您在此处看到的：

上面也没有空白或填充。

Answer 1

只需将d-flex类添加到.col元素：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container">
<div class="row">
        <div class="col-2 d-flex">
            <div class="custom-control custom-checkbox my-auto" >
              <input class="custom-control-input" id="customCheck2" type="checkbox" checked >
              <label class="custom-control-label" for="customCheck2"></label>
            </div>
        </div>

        <div class="col-10">
            <div class="progress-wrapper mt-1 pt-0">
              <div class="progress-info">
                <div>
                  <span>5 Sterne</span>
                </div>
                <div class="progress-percentage">
                  <span style="font-size: 12px">65%</span>
                </div>
              </div>
              <div class="progress">
                <div class="progress-bar bg-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
              </div>
            </div>
        </div>
  </div>
    </div>

Answer 2

使用弹性盒

.custom-flex {
  display: flex; /* make the div flex */
  align-items: center; /* align the items in center vertically */
  align-self: center;
  justify-content: center; /* align the times in center horizontally */
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container-fluid">
<div class="row">
        <div class="col-2 custom-flex">
            <div class="custom-control custom-checkbox my-auto" >
              <input class="custom-control-input" id="customCheck2" type="checkbox" checked >
              <label class="custom-control-label" for="customCheck2"></label>
            </div>
        </div>

        <div class="col-10">
            <div class="progress-wrapper mt-1 pt-0">
              <div class="progress-info">
                <div>
                  <span>5 Sterne</span>
                </div>
                <div class="progress-percentage">
                  <span style="font-size: 12px">65%</span>
                </div>
              </div>
              <div class="progress">
                <div class="progress-bar bg-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
              </div>
            </div>
        </div>
  </div>
    </div>

Answer 3

您可以将.custom-checkbox的父元素设为flex元素，然后使用align-content将其垂直放置。 Bootstrap 4提供了用于执行此操作的类： class="col-md-2 d-flex align-items-end"

Bootstrap 4垂直对齐自定义复选框与进度栏

3 个答案: