标签文本重叠单选按钮答案

【问题标题】：Label text overlapping radio button标签文本重叠单选按钮
【发布时间】：2017-06-27 13:48:41
【问题描述】：

仅在 iPhone 5 上（在所有其他屏幕上看起来都很好）我在此标签的文本与单选按钮重叠时遇到了问题：

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3">
    <input type="radio" id="qMCa" value="TextMessage"><label for="qMCa"><span></span>Text Message</label>
</div>

这是label的css

label {
    display: flex;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

这是它在 iPhone 5 上的样子：

如果我将标签的display 更改为block，我会得到：

文字需要对齐，并且不能与单选按钮重叠。我一直在看this thread 和this one，但到目前为止还没有搞定。

【问题讨论】：

尝试给空格：nowrap;通过 Text Message 为那个跨度
你试过 display: inline-block;在标签上而不是 flex 上？
@HemaNandagopal 哈哈！老实说，我不知道为什么我没有想到这一点！让它成为答案，我会将其标记为正确
@KyleSposato，我做到了，结果与第一个屏幕截图相同

标签： html ios css twitter-bootstrap flexbox

【解决方案1】：

尝试给出空格：nowrap;为了避免文本分裂，通过短信的跨度

【讨论】：

【解决方案2】：

更改显示属性，试试这个

display: inline;

【讨论】：