Question

我的问题很简单。我有一个输入组，我只想以响应方式将字形图标放在按钮的前面。我尝试了很多事情，但没有任何效果。

请帮助

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<table class="table columns-formating">
  <tbody>
    <tr>
      <th>IBAN</th>
      <td>
        <div class="form-group">
          <div class="input-group">
            <input name="iban" class="form-control form-control-sm input-sm" />
            <span class="input-group-btn">
             <button type="button" class="btn btn-default">Validate</button>
            </span>
          </div>
          <div>
            <span class="color-green"><i class="glyphicon glyphicon-ok-sign"></i></span>
            <span class="color-red"><i class="glyphicon glyphicon-remove-sign"></i></span>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

我不确定您的意思是什么，但是如果您想将图标放在同一行和按钮内：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<table class="table columns-formating">
  <tbody>
    <tr>
      <th>IBAN</th>
      <td>
        <div class="form-group">
          <div class="input-group">
            <input name="iban" class="form-control form-control-sm input-sm" />
            <span class="input-group-btn">
             <button type="button" class="btn btn-default">
             <span class="color-green"><i class="glyphicon glyphicon-ok-sign"></i></span>
            <span class="color-red"><i class="glyphicon glyphicon-remove-sign"></i></span>
            Validate</button>
            </span>
          </div>
          </div>
          <div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

只需将带有图标的跨距放入按钮元素中，就像这样：

/*.input-wrapper {
  position: relative;
}*/ /*remove this*/

.input-wrapper input {
  padding-right: 45px;
}

.input-wrapper .icons {
  position: absolute;
  right: 82px;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%)
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<table class="table columns-formating">
  <tbody>
    <tr>
      <th>IBAN</th>
      <td>
        <div class="form-group">
          <div class="input-group">
            <div class="input-wrapper">

              <input name="iban" class="form-control" />
              <div class="icons">
                <span class="color-green"><i class="glyphicon glyphicon-ok-sign"></i></span>
                <span class="color-red"><i class="glyphicon glyphicon-remove-sign"></i></span>
              </div>



            </div>
            <span class="input-group-btn">
              <button type="button" class="btn btn-default">
                Validate</button>
            </span>
          </div>

        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 3

添加input-group-addon

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<table class="table columns-formating">
  <tbody>
    <tr>
      <th>IBAN</th>
      <td>
        <div class="form-group">
          <div class="input-group">
            <input name="iban" class="form-control" />
            <span class="input-group-addon">
            <span class="color-green"><i class="glyphicon glyphicon-ok-sign"></i></span>
            <span class="color-red"><i class="glyphicon glyphicon-remove-sign"></i></span>
            </span>
            <span class="input-group-btn">
             <button type="button" class="btn btn-default">
             
            Validate</button>
            </span>
          </div>
          </div>
          <div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

同一行中的两个元素

3 个答案: