React-bootstrap：反向输入复选框，因此标签文本位于第一位

Question

我有一个由react-bootstrap生成的复选框，它的显示方式类似于包含输入标签和标签标题的标签。 我想拥有它，以便标签标题排在第一位。

react-bootstrap中的复选框：

<Checkbox
   checked={checkedStatus}
   onChange={(e) => this.handleToggle(e, checkBoxValue)}
>{title}</Checkbox>

渲染的HTML：

<div class="checkbox">
    <label title="">
        <input type="checkbox" value="">
        Did not perform
    </label>
</div>

输出：

Answer 1

我使用flex通过更改行方向来解决此问题。

HTML：

<div class="checkbox">
    <label title="">
        <input type="checkbox" value="">
        Did not perform
    </label>
</div>

CSS：

div.checkbox {
  display: inline-block;
  /*ie7 -- start*/
  *display: inline;
  zoom: 1;
}

div.checkbox > label {
  display: flex;
  flex-direction: row-reverse;
}

输出：

JSFiddle：here