-1

我正在使用 MDBootstrap 自定义复选框，并希望在 Razor 中的每个 foreach 循环的表格单元格中显示它。虽然 foreach 并不重要，但我无法让复选框水平居中。正常的复选框输入工作正常，但是当我使用引导程序中的自定义复选框时，它不再与中心对齐。这是我的带有自定义复选框的 HTML。

 <td style="text-align:center;padding:0Px; vertical-align:middle;">
      <div class="custom-control custom-checkbox">
             <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
             <label class="custom-control-label" for="defaultUnchecked"></label>
      </div>
</td>

这是正常的复选框

<input type="checkbox" >

在下图中，您可以看到自定义和标准复选框。没有警告背景的那个是我想要居中的那个。

在此处输入图像描述

4

1 回答 1

1

只需为 MDBootstrap 自定义复选框添加自定义 css，如下所示：

.custom-control-label::before, .custom-control-label::after {
  left: -1.25rem !important;
}
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.3/css/mdb.min.css" rel="stylesheet">

<table border="1">
    <tr>
        <td style="text-align:center;padding:0Px; vertical-align:middle; width: 50px; height: 50px">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                <label class="custom-control-label" for="defaultUnchecked"></label>
            </div>
        </td>
    </tr>
    <tr>
        <td style="text-align:center;padding:0Px; vertical-align:middle; width: 50px; height: 50px">
            <input type="checkbox" >
        </td>
    </tr>
</table>

于 2019-02-20T08:37:38.137 回答