先决条件

• 我有一个 searched 用于处理重复或已关闭的问题
• 我有一个 validated 的任何HTML以避免常见问题
• 我阅读了 contributing guidelines

描述问题

按钮应该在只读字段的末尾渲染，而不是在下一行。

<div class="row">
    <label for="FieldString1" class="col-3 col-form-label">My Label</label>
    <div class="col-9">
        <span class="input-group">
            <input id="FieldString1" type="text" value="My Text" class="form-control"   />
            <a href="#" class="btn btn-primary">View Details</a>
        </span>
    </div>
</div>
<div class="row">
    <label for="FieldString2" class="col-3 col-form-label">My Label</label>
    <div class="col-9">
        <span class="input-group">
            <input id="FieldString2" type="text" value="My Text" class="form-control" readonly />
            <a href="#" class="btn btn-primary">View Details</a>
        </span>
    </div>
</div>
<div class="row">
    <label for="FieldString3" class="col-3 col-form-label">My Label</label>
    <div class="col-9">
        <span class="input-group">
            <input id="FieldString3" type="text" value="My Text" class="form-control-plaintext" readonly />
            <a href="#" class="btn btn-primary">View Details</a>
        </span>
    </div>
</div>

简化的测试用例

https://codepen.io/rjpaulsen/pen/gOeppxK

你在哪个操作系统上看到这个问题？

Windows

你在哪个浏览器上看到这个问题？

Microsoft Edge

你使用的Bootstrap版本是什么？

v5.1.3