css - 使用 Bootstrap 修复两列行的位置

Question

到目前为止，我了解了一些有关 Bootstrap 中的表单和可折叠面板的知识，这就是我的进展:

我不知道如何解决“Email”的标签和它的文本框离得太远的问题。那是我需要帮助的部分。有没有办法让它们位于该面板的中心？或者例如他们是否可以从面板标题文本结束的地方开始？

这是我的 HTML:

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
            <h4 class="panel-title">
                <a class="accordion-toggle">
                    Collapsible Group Item #1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-4">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

如果您使用 form-inline 而不是这样的列，您的标签将在您的输入旁边。添加一个 text-center 它将使它们居中。例如:

    <div class="panel-body">
        <div class="form-inline text-center">
            <div class="form-group">
                <label for="inputEmail3" class="control-label">Email</label>
                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
        </div>
    </div>