html - Bootstrap 表单无缘无故地移到顶部

问题描述

使用 Bootstrap 3 和下面的简化代码，与行中的其他两种形式相比，我无法弄清楚为什么第一种形式会稍微移到顶部：

    <!DOCTYPE html>
<html lang="en">
<head>
    <!-- our own css -->
    <link rel="stylesheet" href="{% static 'style.css' %}" type="text/css">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <meta charset="UTF-8">

    <title></title>
</head>


<body>
    <div class="container-fluid text-center">
        <div><h1><b>bohoo</b></h1></div>
        <br />
        <hr>
        <div class="row">
            <div class="form-group">
                <div class= "col-sm-3 col-md-3 col-lg-3 col-lg-offset-1 col-md-offset-1 col-lg-offset-1 gray">
                    <h3>here's a title</h3>
                    <form action="." method="post">
                            {{numberform}}
                            <p> </p>
                        <input type="submit" class="btn btn-primary" name="x" value="A value">
                        <input type="submit" class="btn btn-warning" name="y" value="A value">
                    </form>
                    <br>
                </div>
            </div>
            <div class="form-group move-right">
                <div class= "col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-1 col-lg-3 col-lg-offset-1 gray">
                    <h3>here's a title</h3>
                    <form action="." method="post">
                            {{textform}}
                        <input type="submit" class="btn btn-primary" name="z" value="A value">
                        <input type="submit" class="btn btn-warning" name="y" value="A value">
                    </form>
                    <br>
                </div>
            </div>
            <div class="form-group move-right">
                <div class= "col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-1 col-lg-3 col-lg-offset-1 gray">
                    <h3>uuu a title</h3>
                    <form action="." method="post" enctype="multipart/form-data">
                       {{fileform}}
                        <input type="submit" class="btn btn-primary" name="a" value="A value">
                        <input type="submit" class="btn btn-warning" name="b" value="A value">
                    </form>
                    <br>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="text-center">
                <hr>
                <h3><b>Result:</b></h3>
                <div class="col-sm-10 col-md-10 col-lg-10 col-sm-offset-1 col-md-offset-1 col-lg-offset-1">
                    {{result}}
                </div>
            </div>
        </div>
    </div>

</body>
</html>

这是 Chrome 中的结果，在多个屏幕和尺寸上进行了测试：

表格移动到顶部。截图[1]

这是我的style.css：

.gray {
background-color: #f2efef;
border-radius: 15px;
}

.move-right {
    padding-left: 200pt;
}

我不知道是什么导致左边的第一个表格有点拉到顶部。我尝试了各种噱头来解决这个问题，但是填充、添加边距顶部，甚至添加<br>s 都没有帮助。

谢谢。

标签： htmlcsstwitter-bootstrap-3

html - Bootstrap 表单无缘无故地移到顶部

问题描述

解决方案

推荐阅读