Question

所以我有这个简单的bootstrap登录页面

<?php
    include 'include/global.php';
    include 'include/function.php';

if (isset($_GET['action']) && $_GET['action'] == 'index') {

＆GT？;

        $('title').html('Login');

        function login_selectuser(device_name, sn) {

            $("#button_login").attr("href","finspot:FingerspotVer;"+$('#select_scan').val())

        }
    </script>

    <div class="row">
        <div class="col-md-4">

        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label for="user_name">Username</label> 
                <select class="form-control" onchange="login_selectuser()" id='select_scan'>
                    <option selected disabled="disabled"> -- Select Username -- </option>
                        <?php               
                            $strSQL = "SELECT a.* FROM demo_user AS a JOIN demo_finger AS b ON a.user_id=b.user_id";
                            $result = mysql_query($strSQL);

                            while($row = mysql_fetch_array($result)){

                                $value = base64_encode($base_path."verification.php?user_id=".$row['user_id']);

                                echo "<option value=$value id='option' user_id='".$row['user_id']."' user_name='".$row['user_name']."'>$row[user_name]</option>";
                            }               
                        ?>
                </select>
            </div>
            <a href="" id="button_login" type="submit" class="btn btn-success">Login</a>
        </div>
        <div class="col-md-4">

        </div>
    </div>

问题是表单位置在页面顶部..我想把我的表单放在页面中间...你们可以帮我解决这个问题吗？

Answer 1

此问题基本上与this question重复。

要垂直居中表单，您可能需要使用标准CSS垂直居中。 Bootstrap没有开箱即用的垂直内容居中类。

话虽这么说，你可以使用像Jumbotron这样的功能来帮助你了解引导方式的一部分。

jumbotron将为您提供一个漂亮的框架结构来包装您的表单，然后您需要应用flexbox（仍然不是普遍支持，但非常干净）或传统的CSS方法垂直居中，这是远hackier，但更好的支持。

就个人而言，在引导程序的内部或外部，我使用了Chris Coyier的方法，并从中受益。

首先，确保您实际上有一个包装整个表单的表单标记。

然后在.form-group元素上放置一个自定义类。

然后你可以申请：

我使用的非flexbox方式是：

form.FORM_TAG_WRAPPER_CLASS {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

和flexbox方式是这样的：

<input type="number" data-name="something here" data-qty="1" data-id="1">
<input type="number" data-name="something else" data-qty="3" data-id="2">
<input type="number" data-name="something other" data-qty="5" data-id="3">

这些方法和更多方法是documented here。

将bootstrap表单设置为中心

1 个答案: