Question

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

有人可以帮帮我吗？

Answer 1

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

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

Answer 2

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

在line-height课程中添加mt-remove也可以帮助您，如果您觉得它有用。

Answer 3

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

尝试两个6列：

Timestamp.from(dto.getTimeModified().toInstant().plusSeconds(600))

如何在bootstrap中获取同一行的控件和图标？

3 个答案: