React-bootstrap:反转复选框输入，使标签文本排在第一位 [英] React-bootstrap: Reverse checkbox input so the label text comes first

问题描述

我有一个由 react-bootstrap 生成的复选框，它呈现为一个包含输入标签和标签标题的标签.我想要它，以便标签标题排在第一位.

来自 react-bootstrap 的复选框:

<复选框已检查={已检查状态}onChange={(e) =>this.handleToggle(e, checkBoxValue)}>{title}</复选框>

呈现的 HTML:

<label title=""><input type="checkbox" value="">没有执行

输出:

解决方案

我使用 flex 通过改变行方向来解决这个问题.

HTML:

<label title=""><input type="checkbox" value="">没有执行

CSS:

div.checkbox {显示:内联块；/*ie7 -- 开始*/*显示:内联；缩放:1；}div.checkbox >标签 {显示:弹性；flex-direction: 行反向；}

输出:

JSFiddle:这里

I have a checkbox generated by react-bootstrap and it's rendered like a label containing input tag and label title. I want to have it so that the label title comes first.

Checkbox from react-bootstrap:

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

Rendered HTML:

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

Output:

解决方案

I used flex to solve this by changing the row direction.

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;
}

Output:

JSFiddle: here

这篇关于React-bootstrap:反转复选框输入，使标签文本排在第一位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！