JSX 在一行中显示电话号码时出现问题

Question

我有一个简单的问题，但我无法找到解决方案。 我有这个元素

<tr className="list-group-item list-item row">
<td className="col">Phone number :</td>
<td className="col">{this.state.phone_number}{""}</td>
</tr>

我希望它像这样显示一行

行

Phone number :        [phone]                     

但是它显示这个

+1 
Phone number :        773-
381-
0000

Answer 1

您可以尝试正确显示nowrap属性。

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_nowrap

<tr className="list-group-item list-item row">
<td className="col">Phone number :</td>
<td  style="white-space: nowrap;" className="col">{this.state.phone_number}{""}</td>
</tr>

您的问题是表格中没有足够的空间并且文本换行。

row和col引导类不能很好地处理表。在此处查看响应式表格 https://mdbootstrap.com/docs/jquery/tables/responsive/