Question

我正在尝试使用bootstrap，这是我写的代码：

<!doctype html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="./css/bootstrap.min.css">
        <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
        <style type="text/css">
            .row-centered {
                text-align:center;
            }
            .col-centered {
                display:inline-block;
                float:none;
                text-align:left;
                margin-right:-4px;
            }
            .pos{
                position: relative;
                top: 240px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row row-centered pos">
                <div class="col-lg-8 col-centered">
                    <div class="well"></div>
                </div>
                <div class="col-lg-8 col-centered">
                    <div class="well"></div>
                </div>
                <div class="col-lg-8 col-centered">
                    <div class="well"></div>
                </div>
            </div>
        </div>
    </body>
</html>

输出如屏幕截图所示：
但是当我转换到手机屏幕时，我会这样：
我希望div在移动屏幕中显示在中心，一个在一个以上。我该怎么做？但它没有响应。

Answer 1

你可以在你的div中使用col-xs-12，将其添加到每个div中它会像你期望的那样工作

<强> LIVE DEMO

  <body>
        <div class="container">
            <div class="row row-centered pos">
                <div class="col-lg-8 col-xs-12 col-centered">
                    <div class="well"></div>
                </div>
                <div class="col-lg-8 col-xs-12 col-centered">
                    <div class="well"></div>
                </div>
                <div class="col-lg-8 col-xs-12 col-centered">
                    <div class="well"></div>
                </div>
            </div>
        </div>
    </body>

有关bootstrap的更多信息 grid option

Answer 2

您可以为屏幕尺寸定义多个宽度：

col-lg：大屏幕

col-md：中间屏幕

col-xs：小屏幕

在你的例子中：

<div class="container">
    <div class="row row-centered pos">
        <div class="col-lg-8 col-xs-12 col-centered">
            <div class="well"></div>
        </div>
        <div class="col-lg-8 col-xs-12 col-centered">
            <div class="well"></div>
        </div>
        <div class="col-lg-8 col-xs-12 col-centered">
            <div class="well"></div>
        </div>
    </div>
 </div>

Answer 3

对我来说，你所做的一切都不错你只需要修改CSS，如下所示：

    .row-centered {
        text-align:center;
        margin:0 auto;
    }
    .col-centered {
        display:block;
        float:none;
    }
    .pos {
        position: relative;
        top: 240px;
    }

当你想把它做得更小时，只需减少8到7或6，这一切都是相应的。对于大屏幕使用col-lg是正确的，并且它不会使用它来保持移动性能。

在bootstrap中创建响应式div

3 个答案: