React-bootstrap：反转复选框输入，因此标签文本首先出现答案

【问题标题】：React-bootstrap: Reverse checkbox input so the label text comes firstReact-bootstrap：反转复选框输入，因此标签文本首先出现
【发布时间】：2018-11-02 11:59:37
【问题描述】：

我有一个由 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>

输出：

【问题讨论】：

标签： css react-bootstrap

【解决方案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

【讨论】：