Question

我是这个世界的初学者，并且有一些技巧我仍然需要学习，我在这个设计中玩，而我被击碎的最多的东西就是对齐。我尝试以全屏风格垂直和水平对齐。我尝试了一些不同的东西，但它总会在某些方面破裂。

我使用最新的Bootstrap。

基数如下： http://i.stack.imgur.com/RUL9K.png

感谢您的时间。

Answer 1

您可以通过以下代码尝试：

<!DOCTYPE html>
<html>
<head>
    <title>Centering</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
    jQuery(document).ready(function(){
        window_height=jQuery(window).height();
        my_div_height=jQuery(".col-centered").height();
        center_value=(window_height-my_div_height)/2;

        jQuery(".col-centered").css('margin-top',center_value);
    });

    // script for responsive;
    jQuery(window).resize(function(){
        window_height=jQuery(window).height();
        my_div_height=jQuery(".col-centered").height();
        center_value=(window_height-my_div_height)/2;

        jQuery(".col-centered").css('margin-top',center_value);
    });
</script>

<style type="text/css">  
    .col-centered {
        margin:auto;
        float: none; 
        text-align:center;
    }
</style>
</head>

<body>

    <section class="custom_name">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-10 col-centered">
                    fsadfljsd
                </div>
            </div>
        </div>
    </section>

</body>
</html>

Answer 2

您可以通过创建div class="row"来控制水平对齐，然后将需要的空格div添加到类col-md-*

＆＃13;

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-8">col-md-8.. This will occupy 8/12th space. but will occupy full width in small screens.</div>
  <div class="col-md-4">You can also add more colomuns. this one is 4/12th space.</div>
</div>
<hr>
<div class="row">

  <div class="col-md-4 col-md-offset-3">if you add some offset to beginning you can use .col-md-offset-*. here there will be 3/12th space offset. again in small screen it will be full width</div>
</div>

＆＃13;

使用bootstrap 3全屏显示垂直和水平对齐

2 个答案: