html - 无法移动复选框以与我的 Bootstrap 文本框对齐

Question

JSFiddle 用于代码，然后是我在屏幕上看到的屏幕截图，因为 JSFiddle 显示错误:

(链接中的完整代码，下面的简要 View ) http://jsfiddle.net/WeDLR/1/

        <div class="col-lg-3"> 
            <form method =post action="/UnitInfo/TSMServlet" NAME="form01">

                <div class="form-group">
                    <label for="terminalname" class="col-lg-3 control-label">Terminal Name</label>
                        <div class="col-lg-3">
                            <input type="checkbox" class="checkbox" display="inline-block" name="checkbox_tname" onclick="checkbox_tname_click();">&nbsp;&nbsp;&nbsp;
                            <input type="text" class="form-control" name="tname" placeholder="Terminal Name">
                        </div> 
                </div>
        </div>

目前，我的复选框部分位于我的文本框下方。我想让复选框的中心与文本框的中心在同一行上。我怎样才能做到这一点？

附言。如果我不使用 Bootstrap 文本框，我的对齐方式似乎就很好。

Answer 1

尝试遵循 css...

.checkbox {
    width: 100%;
}
.form-group {
    white-space: nowrap;
    display:inline
}
.form-control {
    display: inline-block;
}

Demo Fiddle