Question

我希望一切都在页面的中心，它也需要响应。

这是我的PHP代码，因为我使用循环来显示所有复选框。

<div class="container-fluid">
    <!-- START FORM -->
    <form method="post" class="form-horizontal"> 
        <!-- ROW 1 CHECKBOXES -->
<?php
    for ($i=0; $i < 8; $i++) { 
        echo "<div class='row'>
            <div class='col-md-4'>
                <div class='col-md-2'><input type='checkbox' class='form-
control chk_boxes2' name='check_list[]'></div>
                <label class='col-md-2'>Medewerker</label>        
            </div>
            <div class='col-md-4'> 
                <div class='col-md-2'><input type='checkbox' class='form-
control chk_boxes2' name='check_list[]'></div> 
                <label class='col-md-2'>Medewerker</label>
            </div>
            <div class='col-md-4'>
                <div class='col-md-2'><input type='checkbox' class='form-
control chk_boxes2' name='check_list[]'></div>
                <label class='col-md-2'>Medewerker</label>
            </div>
            </div>";
    }
?>         
        <!-- ROW SUBMIT -->
        <div class="row down right">
            <div class="col-md-6">
                <label class="col-md-3">Check all</label>
                <div class="col-md-3"><input type='checkbox' 
class="chk_boxes form-control">
            </div>
            <div class="col-md-6">
                <input type="submit" name="Verder" value="Verder" 
class="form-control btn-primary">
            </div>
        </div>  
    </form>
    <!-- END FORM -->
</div>

这是我现在使用的jQuery，我知道它没什么可靠的：

$('.down').css('margin-top', function () {
    return ($(window).height() - $(this).height()) / 2.8
});

$('.right').css('margin-left', function () {
    return ($(window).height() - $(this).height()) / 2
});

这是JSFiddle的链接，你需要扩展它，因为大屏幕是这里的主要问题。

https://jsfiddle.net/wq0r0se4/

先谢谢。

Answer 1

将text-align: center应用于.form-horizontal

并删除边距js

更新你的小提琴https://jsfiddle.net/wq0r0se4/1/

Bootstrap：中心内容

1 个答案: