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

【问题标题】：Bootstrap 3 - Space between inputs with Icons and custom widthBootstrap 3 - 带有图标和自定义宽度的输入之间的空间
【发布时间】：2017-04-25 08:47:20
【问题描述】：

我遇到了一个我真的不知道如何处理的问题。我正在开发 BootStrap 3，我正在尝试制作一些内联表单，因为它比完整的垂直表单更易于使用（我不想永远滚动）

我找到了一些内联普通输入的方法，但是当涉及到带有图标的输入 (font awesome) 时，我可以弄清楚如何内联它们，但它们并排内联，它们之间没有任何空格。另外，我不知道如何像使用普通输入那样更改它们的宽度（例如col-sm-4）。

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

请查看我的代码和解释它的下图： http://www.bootply.com/T8w3oRE3Sn

【问题讨论】：

你需要什么输出？你能分享一张这张照片吗？
@SahilDhir 我添加了一张图片来显示输出

标签： css twitter-bootstrap input icons adminlte

【解决方案1】：

你在表单组中遗漏了一些东西，所以我已经结束了。 Hope it will help you :)

下面是工作的sn-p：

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row myform">
  <div class="col-xs-12">
    <form name="myform" role="form" novalidate>

      <div class="form-inline ">
        <div class="form-group col-xs-6">
          <div class="input-group col-xs-12">
            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
            <input type="email" class="form-control" placeholder="Email de l'interlocuteur">
          </div>
        </div>
        <div class="form-group col-xs-6">
          <div class="input-group col-xs-12">
            <span class="input-group-addon"><i class="fa fa-phone"></i></span>
            <input type="email" class="form-control" placeholder="Téléphone de l'interlocuteur">
          </div>
        </div>
      </div>

    </form>
  </div>

</div>

【讨论】：

谢谢你，Sahil，我会看看这个，但显然这正是我想要的 :)
是的，请看一下，如果您需要任何帮助，请告诉我
如果您不介意，我至少有一个问题。为什么使用col-xs而不是col-sm。我试过col-sm但它不起作用并且空间消失了
col-xs 将使它对所有设备宽度都具有响应性......另外我正在更新我对所有设备兼容性的答案
用需要的小自定义 css 更新了我的答案。现在它兼容所有设备（台式机、笔记本电脑、平板电脑、手机）

【解决方案2】：

试试这个

如果您在大屏幕上看到它，它将是内联的。您必须使用 form-inline 类来使表单内联。

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <form class="form-inline">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

【讨论】：

【解决方案3】：

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

<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>

【讨论】：

Tejas 我实际上是在询问“电子邮件”和“电话”这两个输入