bootstrap 如何让控件和图标在同一行？

Question

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

有人可以帮我吗？

Answer 1

float:left 就是您要查找的内容。只需将它应用于输入和图标的 class 并设置输入的宽度，使其不会占据整个屏幕的宽度。

.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 class 上添加 line-height 如果您觉得有用，也可能对您有所帮助。

Answer 2

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

试试两个 6 列：

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

Answer 3

问题是您没有正确使用 bootstrap 的 class 形式。 Bootstrap 让您能够使用它基于表单的 classes 和超棒的字体 classes 来专门设计。您可以使用以下 html 和 bootstrap classes 来实现此目的。

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 class 更改为以下内容即可。

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

样本：http://codepen.io/Nasir_T/pen/VmvBXV

bootstrap 如何让控件和图标在同一行？

How to get control and icon on the same line in bootstrap?

css

twitter-bootstrap

font-awesome

twitter-bootstrap-3