twitter-bootstrap 如何添加基于文本的单位，例如浮动到输入元素内部（或外部）的“lbs”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29661058/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add text-based units like "lbs" floated to right inside of an input element (or outside of it)?
提问by dkoss
Is it possible to insert units inside an input element? Inside the <input>element is preferred, but outside is acceptable.
是否可以在输入元素中插入单位？<input>元素内部是首选，但外部是可以接受的。
回答by pollirrata
回答by Mwiza
You can make use of bootstrap input-group component.
您可以使用引导输入组组件。
Note: The example below uses bootstrap 4 classes
注意：下面的示例使用 bootstrap 4 类
<div class="input-group">
<input type="number" class="form-control">
<div class="input-group-append">
<span class="input-group-text"> m </span>
</div>
</div>
Here is the result below:
结果如下：
回答by Oliver Nicolaas Ponder
I would do this by nudging an extra element (like a span) over the input using position: relativeand left: -20px.
我会通过使用position: relativeand在输入上轻推一个额外的元素（如跨度）来做到这一点left: -20px。
Then some padding-righton the input element to ensure that the user's input wont overlap on the new element.
然后padding-right在 input 元素上添加一些，以确保用户的输入不会在新元素上重叠。
Example here:
这里的例子：
回答by Fares M.
Since you are using bootstrap, you can use input-groupscomponent and override some of the bootstrapstyling :
由于您正在使用bootstrap，您可以使用input-groups组件并覆盖一些bootstrap样式：
HTML
HTML
<div class="input-group unity-input">
<input type="text" class="form-control" placeholder="Enter unity value" aria-describedby="basic-addon2" /> <span class="input-group-addon" id="basic-addon2">
lbs
</span>
</div>
CSS
CSS
.input-group {
top:40px;
width:auto;
}
.unity-input .form-control {
border-right:0!important;
}
.unity-input .input-group-addon {
background:white!important;
border-left:none!important;
font-weight:bold;
color:#333;
}
回答by vcanales
Here: (numbers are arbitrary and you can play around with those, what's important is to float the input and the negative margin on the span holding the measurement unit)
在这里：（数字是任意的，您可以随意使用这些数字，重要的是在保持测量单位的跨度上浮动输入和负边距）
CSS:
CSS：
#form>span {
display: inline-block;
padding-top: 5px;
margin-left: -16px;
}
#form>input {
padding: 5px 16px 5px 5px;
float:left;
}
HTML:
HTML：
<div id="form">
<span class="units">lb</span>
<input type="text" placeholder="Value" />
</div>
回答by Joshua
The only thing you can try with strictly css and html is placeholder and text align left. with jquery you could you the .addClass command.
您可以尝试严格使用 css 和 html 的唯一方法是占位符和文本左对齐。使用 jquery，您可以使用 .addClass 命令。
http://jsfiddle.net/JoshuaHurlburt/34nzt2d1/1/
http://jsfiddle.net/JoshuaHurlburt/34nzt2d1/1/
input {
text-align:right;
}
