Question

这是我的jsFiddle，其中包含完整的代码示例。

我想：

整个“网页内容”container（即开始“登录... ”的<h1>以及整个<form>元素）在屏幕中居中;和
“需要帮助？”链接需要左对齐，与提交按钮的左侧对齐

我正在尝试通过text-center设置容器的中心位置。我正在尝试通过text-left对齐链接。两者都没有工作：

<div class="container">
    <div class="row">
        <div class="col-md-8 text-center">
            <h1 class="strong-primary">Sign in to continue to Audit<b>Cloud</b>.</h1>
        </div>
        <div class="col-md-4 text-center">
            <form role="form">
                <div class="form-group">
                    <input type="email" class="form-control" id="signin-email" placeholder="Your email">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" id="signin-password" placeholder="Password">
                </div>
                <button type="submit" class="btn form-control btn-lg btn-success">Sign in</button>
                <div class="form-group"><a href="#" class="text-left">Need help?</a></div>
            </form>
        </div>
    </div>
</div>

有什么想法吗？

Answer 1

您需要将text-align:left;应用于包含<div>的内容。而不是class="text-left，请使用style="text-align:left;。我将这些变化放在你的小提琴中：

Bootstrap 3：表单样式失败

1 个答案:

http://jsfiddle.net/fjL4f2ew/1/