0

我正在为网站制作一个简单的登录页面，但我的表单不会与中心对齐。如果您看一下这里，您会发现它略微向右偏移。我已经尝试在表单周围添加一个容器 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}

如果你能弄清楚问题是什么，我会给你烤一个馅饼之类的。谢谢。

4

4 回答 4

1

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

于 2013-01-23T03:24:48.547 回答
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-->
于 2013-01-23T02:53:45.107 回答
0

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

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

希望有帮助。

于 2013-01-23T02:21:06.217 回答
0

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

于 2015-11-30T18:25:27.433 回答