如何在引导程序中的同一行上获取控件和图标？答案

【问题标题】：How to get control and icon on the same line in bootstrap?如何在引导程序中的同一行上获取控件和图标？
【发布时间】：2016-11-10 04:42:55
【问题描述】：

我正在使用引导程序的网格系统进行页面布局。在其中一列中，我想在同一列中并排显示input 控件和字体真棒图标。但是我无法正确对齐图标。它总是低于控制。

这里是JSfiddle

有人可以帮帮我吗？

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 font-awesome

【解决方案1】：

问题是您没有正确使用引导程序的表单类。 Bootstrap 使您能够使用它的基于表单的类和字体真棒类进行专门设计。您可以使用以下 html 和引导类来实现此目的。

HTML：

<div class="row">
   <div class="col-md-6">
      <div class="input-group">
          <input name="FirstName" class="form-control" id="FirstName" type="text">
          <span class="input-group-addon">
              <i class="fa fa-minus-circle" aria-hidden="true"></i>
          </span>
      </div>
   </div>
</div>

CSS：

.input-group-addon {
    cursor: pointer;
    color: red;
}

如果您想删除将图标连接到输入的背景和边框，只需将.input-group-addon { css 类更改为以下。

.input-group-addon {
     cursor: pointer;
     color: red;
     border-radius: 4px;
     border: 0px;
     background-color: transparent;
}

示例：http://codepen.io/Nasir_T/pen/VmvBXV

【讨论】：

【解决方案2】：

网格系统基于 12 列布局。您目前在一列 6 列中有两个元素。

尝试使用两个 6 列代替：

<div class="row">
<div class="col-md-6">input</div>
<div class="col-md-6">icon</div>
</div>

【讨论】：

这肯定会将两者并排对齐，但我不确定这是否是 OP 想要的。这看起来像是单个输入控件的两个部分，因此它们可能应该在同一列中。只是我的两分钱。
再看这个问题，你可能是对的。（好吧，至少它提供了另一个答案的替代方案）-
是的。不过，您对col-md-6 专栏的看法是绝对正确的；应该是col-md-12

【解决方案3】：

float:left 是您在此处寻找的内容。只需将其应用于输入和图标的类，并设置输入的宽度，使其不会占据屏幕的整个宽度。

.mt-remove {
  cursor: pointer;
  color: red;
  float: left;
}
.mt-remove:before {
  font-family: 'FontAwesome';
  content: "\f056";
  font-size: 12px;
}
#FirstName {
  width: 200px;
  float: left;
}

在mt-remove 类中添加line-height 也可能对您有所帮助，如果您觉得它有用的话。

【讨论】：