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