代码之家 › 专栏 › 技术社区 › JonSnow

没有标签的引导自定义无线电箱不对齐

bootstrap-4 twitter-bootstrap css

JonSnow · 技术社区 · 6 年前

我正在使用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>

结果:

Fiddle: 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>

2 回复 | 直到 6 年前

Granny 6 年前

使用不打印任何内容的特殊字符将允许您获得正确的对齐方式,而无需在单选按钮旁边显示任何文本。

&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>

Nandita Sharma 6 年前

添加 mb-3 空标签上的类

<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 mb-3" 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>