首页 文章

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

提问于
浏览 次
0

我正在为一个网站制作一个简单的登陆页面，我的表格不会与中心对齐 . 如果你看一下here，你可以看到它略微偏向右边 . 我_994885_ ve也尝试将class = "span6 offset 3"设置为在中心对齐，但仍然保留了很小的偏移量 . 我有一种感觉，其他div中的所有div都在构建某种边距，但我可以't seem to figure out how to fix it. Here'是我的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}

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

html css forms twitter-bootstrap

4 回答

  • 0

    这是我输入的新代码，与之前的代码几乎完全相同，省略了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-->
    回复于
  • 1

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

    回复于
  • 1

    看起来你的“井”类的填充是为bootstrap的span6类增加了宽度 .

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

    希望有所帮助 .

    回复于
  • 0

    请记住，对于bootstrap，还有'-offset-'类，它在对齐项目时非常有用 . 例如，您可以使用“col-md-12 col-md-offset-2”或span6“col-lg-6 col-lg-offset-3” .

    回复于

相关问题