时间戳

首页 > 解决方案 > 没有标签的引导自定义单选框未对齐

css - 没有标签的引导自定义单选框未对齐

问题描述

我正在使用 Bootstrap4 自定义单选按钮，只要我使用标签文本，它就可以正常工作。有时有文本是没有意义的，但是单选按钮本身就是不对齐的。如何解决这个问题？

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1"></label>
</div>

结果：

带标签和不带标签的结果

小提琴：https ://jsfiddle.net/SchweizerSchoggi/51vrL8px/5/

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<table class="table table-bordered">
<thead>
  <th>Select</th>
  <th>Name</th>
</thead>
<tr>
  <td>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1"></label>
</div>
  </td>
  <td>Sample option 1</td>
</tr>
<tr>
  <td>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">with label</label>
</div>
  </td>
  <td>Sample option 2</td>
</tr>
</table>

标签： csstwitter-bootstrapbootstrap-4

解决方案

使用不打印任何内容的特殊字符可以让您获得正确的对齐方式，而不会在单选按钮旁边显示任何文本。

&zwnj;

我猜测它为什么会弄乱样式是因为添加到文本中的 ::before 和 ::after 代码。如果没有文本，则没有可添加标签的内容。

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<table class="table table-bordered">
  <thead>
    <th>Select</th>
    <th>Name</th>
  </thead>
  <tr>
    <td>
      <div class="custom-control custom-radio">
        <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
        <label class="custom-control-label" for="customRadio1">&zwnj;</label>
      </div>
    </td>
    <td>Sample option 1</td>
  </tr>
  <tr>
    <td>
      <div class="custom-control custom-radio">
        <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
        <label class="custom-control-label" for="customRadio1">with label</label>
      </div>
    </td>
    <td>Sample option 2</td>
  </tr>
</table>

推荐阅读