前端.解决form-contral总是换行问题

关注

原创最新推荐文章于 2025-07-25 23:57:32 发布 885 阅读 AI 写同款· GEO 优化 ›

【前端】Bootstrap 表格单行显示不换行的最佳实践摘要： Bootstrap表格默认自动换行，但某些场景（如展示代码、编号）需禁止换行。使用text-nowrap类（原理为white-space: nowrap）可强制内容单行显示，适用于单列或整个表格。建议搭配滚动容器（如table-responsive）避免溢出，同时提供横向滚动支持。对比其他工具类（如text-wrap、text-truncate），此方案简洁高效，适用于需保持数据完整性的场景。阅读详情

form-control 总是会换行，后面加单位的时候很难看，如下图。

1 <div class="col-sm-3"> 
2      <input id="investAmount" name="investAmount" class="form-control" required th:field="*{investAmount}" type="text">
3     <select name="unit" class="form-control" th:field="*{unit}" id="unit" >
4           <option value="万元">万元</option>
5       <option value="亿元">亿元</option>
6    </select>    
7  </div>

尝试了多种方法，终于发现在外框里加入 form-inline就可完美解决。

1 <div class="form-inline col-sm-3"> 
2      <input id="investAmount" name="investAmount" class="form-control" required th:field="*{investAmount}" type="text">
3     <select name="unit" class="form-control" th:field="*{unit}" id="unit" >
4           <option value="万元">万元</option>
5       <option value="亿元">亿元</option>
6    </select>    
7  </div>