Css Bootstrap 3-带有图标和自定义宽度的输入之间的空间

我正面临一个我真的不知道如何处理的问题。 我正在开发Bootstrap3，我正在尝试制作一些内联表单，因为它比完整的垂直表单更方便用户（我不想永远滚动）

我找到了一些内联普通输入的方法，但是当涉及到带有图标的输入（

font-awesome

）时，我可以想出如何内联它们，但是它们并排内联，没有任何间距。 此外，我不知道如何改变它们的宽度，就像我对正常输入所做的那样（

col-sm-4

）

我希望“电子邮件”和“电话”被替换，并改变它们的宽度

请看一下我的代码和下图：

---

您只需要很好地理解引导网格系统

<div class="form-group row">
              <label for="inputEmail3" class="col-sm-1 control-label">Interlocuteur</label>

              <div class="col-sm-2">
                <input type="text" class="form-control" id="inputEmail3">
              </div>

              <label for="inputEmail5" class="col-sm-1 control-label">Poste</label>

              <div class="col-sm-2">
                <input type="text" class="form-control" id="inputEmail5" placeholder="DeInterlocuteur">
              </div>

对话者
邮政

---

试试这个

如果您在大屏幕上看到它，它将是内联的。 必须使用

表单内联

类使表单内联

电邮：
密码：
记得我吗
提交

您在表单组中遗漏了一些内容，因此我已将这些内容打包。

希望它能帮助您：）

以下是工作片段：

.myform.form inline.input group.input group addon{width:20px；}

Tejas我实际上是在询问“电子邮件”和“电话”这两个输入，您需要的输出是什么？你能分享一下吗？@SahilDhir我添加了一张图片来显示输出Hank you Sahil，我会看一看，但显然这正是我想要的：）是的，请看一看，并告诉我你在这方面是否需要任何帮助我至少有一个问题，如果你不介意的话。为什么使用

col xs

而不是

col sm

。我试过使用

col sm

，但它不起作用，而且空格dispearcol xs将使它对所有设备宽度都具有重复性。。。此外，我正在更新我的所有设备兼容性的答案更新我的答案与一个小的自定义css需要。现在它可以兼容所有设备（台式机、笔记本电脑、平板电脑、手机）