Question

我正在为网站制作一个简单的目标网页，而我的表单不会与中心对齐。如果你看一下here，你可以看到它略微偏向右边。我已经尝试在表单周围添加一个容器div，并将其设置为带边距的块：0也是自动，但没有任何变化。我也试过设置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-->

这是我的非Bootstrap 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}

如果你能弄明白问题是什么我会给你一块馅饼什么的。感谢。

Answer 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-->

Answer 2

我建议不要编辑bootstrap css，但要包括你自己的css，就像你上面所做的那样。为您想要居中的特定内容创建一个ID，然后填充它直到它工作。看起来bootstrap css干扰了你自己的css导致问题。它现在可以正常工作，所以如果您认为重要的话请记住，当您想要在将来进行更改时，只有您自己的CSS。最后一点是，打开引导页面可以让您了解在将页面包含在页面之前的跨度和行的样子。

Answer 3

看起来“well”类的填充是为bootstrap的span6类增加了宽度。

你可以通过添加“box-sizing：border-box;”来获取盒子大小调整路径。到您的井类或通过瞄准特定div并将宽度从570px（bootstrap的span6宽度）减小到532px（左右两侧19px填充）。

希望有所帮助。

Answer 4

请记住，对于bootstrap来说，是＆＃39; -offset - ＆＃39;在对齐项目时非常有用的课程。例如，您可以使用＆＃34; col-md-12 col-md-offset-2＆＃34;或者对于span6＆＃34; col-lg-6 col-lg-offset-3＆＃34;。

HTML Bootstrap表单并且没有与中心对齐

4 个答案: