在bootstrap 4

Question

我正在使用bootstrap来输入类型无线电，我想自定义我的无线电输入如下：

这是我的HTML

<form class="size-option">
          <div class="form-check form-check-inline">
            <label class="form-check-label">
              <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">S
            </label>
          </div>
          <div class="form-check form-check-inline">
            <label class="form-check-label">
              <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">M
            </label>
          </div>
          <div class="form-check form-check-inline">
            <label class="form-check-label">
              <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">XL
            </label>
          </div>
        </form>

这是我的scss

.size-option {
  .form-check {
    border: 1px solid $clr-black;
    margin: 0;
  .form-check-label {
    padding: 5px 20px;
    cursor: pointer;
    font-weight: bold;
  }
  .form-check-input {
    visibility: hidden;
    display: none;
  }
 }
}

任何帮助将不胜感激！

Answer 1

希望这可能会对你有所帮助，而不是你正在寻找的但几乎相似的东西。根据需要进行必要的更改。（仅供参考：添加jquery支持）

Plunker

 <div class="thing">
      <div  data-toggle="buttons">
        <label data-toggle="radio-tab-label" data-focus-target="true" data-target="#option1" class=" mr-4 btn btn-primary" tabindex="0">
          <input type="radio" value="One" name="options" id="option1" checked> S
        </label>
        <label data-toggle="radio-tab-label" data-focus-target="true" data-target="#option2" class="mr-4 btn btn-primary" tabindex="0">
          <input type="radio" value="Onea" name="options" id="option2"> M
        </label>
        <label data-toggle="radio-tab-label" data-focus-target="true" data-target="#option3" class=" mr-4 btn btn-primary" tabindex="0">
          <input type="radio" value="Ones" name="options" id="option3"> XL
        </label>
      </div>
    </div>