引导形式对齐。 ＆＃34; form-group row＆＃34;错位的

Question

我遇到了这个问题，接下来是＆＃34;表格组行＆＃34;错误的。使用django / jinja模板（烧瓶项目）。

此代码：

<div class="row">
<div style="color: chocolate; padding: 10px; margin-left: 10px; font-size: 25px;">Client Details</div>
<div class="col-md-12" style="padding: 20px 0px 0px;">
    <form class="form-horizontal">
        <div class="col-md-6" style="border-left: 5px solid #eee; margin: 0 0 20px;">
            <div class="form-group row">
                <label id="labelbox" class="col-sm-2 col-form-label">Client ID</label>
                <div class="input-group col-sm-6">
                    <input class="form-control" col-sm-6 type="text" value="" id="client-id" readonly>
                    <span class="input-group-btn">
                        <button class="btn" type="button" data-clipboard-target="client-id">Copy</button>
                    </span
                </div>
            </div>
            <div class="form-group row">
                <label id="labelbox" class="col-sm-2 col-form-label">Client Secret</label>
                <div class="input-group col-sm-10">
                    <input class="form-control" type="text" value="" id="client-secret" readonly>
                    <span class="input-group-btn">
                        <button class="btn" type="button" data-clipboard-target="client-secret">Copy</button>
                    </span
                </div>
            </div>
        </div>
    </form>
</div>

此行为位于：http://www.bootply.com/Ig0ilwpSdh

理想情况下，我想要换行，我可以用左手，但由于我使用bootstrap，我认为一切都可以通过bootstrap来完成。

并垂直对齐输入字段。

顺便说一句，当我添加：

时，会出现错位

<span class="input-group-btn">

你能建议我如何更好地处理这个问题吗？