Question

我正在创建一个小型Web应用程序，并具有一个引导卡，该引导卡在输入字段旁边包含一个链接。不幸的是，我有以下无法解决的问题：

链接与输入的大小不同
图标不在链接中居中
链接溢出其父容器

在JSFiddle上也是如此：https://jsfiddle.net/LordFisch/3tv9kw5f/4/

HTML：

<div class="card mb-2">
  <div class="card-body">
    <div class="card-text">
      <div class="w-100 border rounded p-1">
        <div class="my-1">
          <div class="form-actions">
            <span class="label control-label">Answer(s):</span>
            <a class="btn btn-primary btn-xs add_fields" href="#">Add Answer</a>
          </div>
        </div>
        <div class="answers">
          <div class="nested-fields">
            <div class="form-group row">
              <div class="col">
                <input class="form-control p-1 m-1" placeholder="Answer" type="text" name="text" id="text" />
              </div>
              <a class="btn btn-primary" href="#">
                <svg class="octicon octicon-trashcan svg-white" aria-label="remove" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/></svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

.svg-white{
  fill:#fff;
}

.label {
    padding-left: 10px;
    width:100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 1

我完全更改了您的代码，因为它不稳定，并且此代码解决了所有问题。

HTML

<div class="card mb-2">
    <div class="card-body">
        <div class="card-text w-100 border rounded p-1 my-1">
            <div class="form-actions">
                <span class="control-label ml-2">Answer(s):</span>
                <a class="btn btn-primary add_fields" href="#">Add Answer</a>
            </div>
            <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="addon">
                <div class="input-group-append">
                    <a class="btn btn-primary" href="#">
                        <svg id="addon" class="octicon octicon-trashcan svg-white" aria-label="remove" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.svg-white{
    fill:#fff;
}

实时代码段

.svg-white{
  fill:#fff;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="card mb-2">
  <div class="card-body">
    <div class="card-text w-100 border rounded p-1 my-1">
      <div class="form-actions">
        <span class="control-label ml-2">Answer(s):</span>
        <a class="btn btn-primary add_fields" href="#">Add Answer</a>
      </div>
      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="addon">
        <div class="input-group-append">
          <a class="btn btn-primary" href="#">
            <svg id="addon" class="octicon octicon-trashcan svg-white" aria-label="remove" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/></svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

如何确保我的图标位于链接/按钮的中心并防止溢出？

1 个答案: