Warm tip: This article is reproduced from serverfault.com, please click
css-防止Boostrap中的标签出现换行符？
(css - Prevent linebreaks in labels in Boostrap?)
发布于 2020-11-30 07:54:59
我已经使用Bootstrap开发了一个表单，我需要该表单在不同设备上正确运行。在表单的一部分中，我在一行上有三个输入，通常可以正常工作。但是，当我在浏览器中模拟不同的设备时，我发现当屏幕宽度缩小时，标签被分成两行。当然这是有道理的，但是我需要一个解决方案来防止这种情况。是否可以？我可以接受标签/图标被裁剪，但没有分成几行的情况。该表格由PHP生成，标签的长度可能有所不同。
我的预期结果是这样的（标签的侧面将有一个图标）：
但是，当屏幕宽度变得太窄时，它看起来像这样：
我不希望图标显示在新行上。我宁愿在没有空间的情况下将其隐藏。
在下面的示例代码中，我将宽度强制设置为350px，以说明问题。使用400px或更大的宽度时，看起来不错：
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<div class="container" style="max-width:350px">
<form>
<div class="form-row">
<div class="col-4">
<div class="form-group">
<label for="input-1">First label <span class='fas fa-info-circle'></span>
</label>
<input id="input-1" class="form-control" name="input1" type="text">
</div>
</div>
<div class="col-4">
<div class="form-group">
<label for="input-1">Second label <span class='fas fa-info-circle'></span></label>
<input id="input-1" class="form-control" name="input2" type="text">
</div>
</div>
<div class="col-4">
<div class="form-group">
<label for="input-1">Third label <span class='fas fa-info-circle'></span></label>
<input id="input-1" class="form-control" name="input3" type="text">
</div>
</div>
</div>
</form>
</div>
</body>
</html>Questioner
Gowire
Viewed
11
