HTML Bootstrap 表单并且未与中心对齐答案

【问题标题】：HTML Bootstrap form and well not aligning to the centerHTML Bootstrap 表单并且未与中心对齐
【发布时间】：2013-01-23 00:58:42
【问题描述】：

我正在为网站制作一个简单的登录页面，但我的表单不会与中心对齐。如果您看一下here，您会发现它略微向右偏移。我已经尝试在表单周围添加一个容器 div，并且将其设置为一个带有 margin:0 auto 的块，但没有任何变化。我还尝试设置 class="span6 offset 3" 以将其对齐在中心，但仍然存在小偏移。我有一种感觉，其他 div 中的所有 div 都在建立某种边距，但我似乎无法弄清楚如何解决它。这是我的 HTML 代码：

<div class="row">
        <div class="span3"></div><!--/.span3-->
        <div class="span6">
            <div class="well span6" align="center">
                <form id="contact-form" name="contact-form" method="post" action="form-processing.php">
                    <input class="span6" name="Name" id="Fname" type="text" placeholder="Your name" required>
                    <input class="span6" name="Email" id="Email" type="email" placeholder="Your email" required>
                    <input class="span6" name="Message" id="Message" type="text" rows="3" placeholder="What's on your mind?" required><br>
                    <button type="submit" class="btn btn-primary" id="button">Submit</button>
                    <button type="reset" class="btn">Clear</button>
                </form>
            </div><!--/.well span6-->
        </div><!--/.span6-->
        <div class="span3"></div><!--/.span3-->
    </div><!--/.row-->

这是我的非引导 CSS 代码：

h1 {font-family: marvel, serif; color:#060; font-size:90px; -webkit-text-stroke: 1px white;}
h2 {font-family: marvel, serif; color:#CCC; font-size:50px; -webkit-text-stroke: 1px black;}
p {color:white; font-size:20px;}
body{
    padding: 40px;
    margin:0 auto;
    background-image: url(../img/background.jpg);
    background-repeat: repeat;
    background-position: center center;
}
.welcome {padding:30px 0 0 0;}
#Message {overflow:hidden;}
.well {margin:0 auto;}
.navbar-fixed-top,.navbar-fixed-bottom{position:fixed}

如果你能找出问题所在，我会给你烤一个馅饼之类的。谢谢。

【问题讨论】：

标签： html css forms twitter-bootstrap

【解决方案1】：

这是我输入的新代码，与之前的代码几乎相同，但省略了 span6 类。现在一切都安排妥当了。

<div class="row">
    <div class="span3"></div><!--/.span3-->
    <div class="well span6" align="center">
        <form id="contact-form" name="contact-form" method="post" action="form-processing.php">
            <input class="span6" name="Name" id="Fname" type="text" placeholder="Your name" required>
            <input class="span6" name="Email" id="Email" type="email" placeholder="Your email" required>
            <textarea class="span6" name="Message" id="Message" type="text" rows="3" placeholder="What's on your mind?" required></textarea><br>
            <button type="submit" class="btn btn-primary" id="button">Submit</button>
            <button type="reset" class="btn">Clear</button>
        </form>
    </div><!--/.well span6-->
    <div class="span3"></div><!--/.span3-->
 </div><!--/.row-->

【讨论】：

【解决方案2】：

我建议不要编辑引导 css，而是像上面所做的那样包含您自己的 css。为您想要居中的特定创建一个 id，然后填充它直到它工作。看起来引导 css 干扰了您自己的 css 导致问题。它现在可以工作，所以如果您认为将来想要进行更改时只记住您自己的 css 很重要。最后一件事，打开引导页面，它可以让您在将跨度和行包含在页面中之前了解它们的外观。

【讨论】：

【解决方案3】：

看起来你的“well”类上的填充正在增加引导程序的 span6 类的宽度。

您可以通过添加“box-sizing:border-box;”来采用 box-sizing 路线到您的井类或通过定位该特定 div 并将宽度从 570px（引导程序的 span6 宽度）减少到 532px（左右填充 19px）。

希望对您有所帮助。

【讨论】：

【解决方案4】：

请记住，对于引导程序，有一个“-offset-”类，它在对齐项目时非常有用。例如，您可以使用“col-md-12 col-md-offset-2”或 span6“col-lg-6 col-lg-offset-3”。

【讨论】：