Question

使用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中测试的结果，已在多个屏幕和尺寸上进行了测试：

Form shifting to the top. Screenshot[1]

这是我的style.css：

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

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

我无法弄清楚是什么原因导致第一个表格从左侧拉到顶部。我尝试了各种头来解决此问题，但是填充，添加页边距甚至添加<br>都无济于事。

谢谢。

Answer 1

form-group类将其弄乱了。您已将所有1/3宽度的div包装为全宽度的“ form-group” div。

从这些div上删除表单组类，然后将表单组类添加到其子div中。带有col-md-3的div，等等。您可能会完全摆脱那些包装div的对象。

Answer 2

不确定为什么会发生这种情况，但是这种覆盖会起作用吗？

.gray{
   margin-top:0px;
   }

引导形式无明显原因转移到顶部

2 个答案: