Bootstrap按钮未对齐

Question

我从一些教程中获得了简单的表格，但它并不适用于我身边

为什么这个按钮没有对齐？

http://jsfiddle.net/9czbdLqp/1/

<form class="form-horizontal">

    <br/>
    <fieldset>
        <legend>First Page</legend>
        <div class="form-group">
            <label for="firstNameInput" class="control-label col-sm-3">First Name</label>

            <div class="col-sm-9">
                <input type="text" id="firstNameInput" class="form-control" />
            </div>
        </div>

        <div class="form-group">
            <label for="lastNameInput" class="control-label col-sm-3">Last Name</label>

            <div class="col-sm-9">
                <input type="text" id="lastNameInput" class="form-control" />
            </div>
        </div>
    </fieldset>

    <div class="col-sm-offset-3 col-sm-9">
        <input type="submit" value="Submit" class="btn btn-primary" />
    </div>

</form>

Answer 1

你的formgroup div正在被bootstrap的css带有负余量

.form-horizontal .form-group {
   margin-right: -15px;
   margin-left: -15px;
}

您可以将提交包装在表单组中或删除div上的边距

<div class='form-group'>
    <div class="col-sm-offset-3 col-sm-9">
        <input type="submit" value="Submit" class="btn btn-primary" />
    </div>
</div>

小提琴：http://jsfiddle.net/1wgoxLn2/1/