html – 在bootstrap中创建响应式div_html-js-css

概述我正在尝试使用bootstrap,这是我写的代码： <!doctype html><html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="./css/bootstrap. 我正在尝试使用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 >            <div >                <div >                    <div ></div>                </div>                <div >                    <div ></div>                </div>                <div >                    <div ></div>                </div>            </div>        </div>    </body></HTML>

输出如屏幕截图所示：

但是当我转换为手机屏幕时,我会这样：

我希望div在移动屏幕中显示在中心,一个在一个以上.我该怎么做？
但它没有响应.

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

LIVE DEMO

<body>        <div >            <div >                <div >                    <div ></div>                </div>                <div >                    <div ></div>                </div>                <div >                    <div ></div>                </div>            </div>        </div>    </body>

有关bootstrap grid option的更多信息

总结

以上是内存溢出为你收集整理的html – 在bootstrap中创建响应式div全部内容，希望文章能够帮你解决html – 在bootstrap中创建响应式div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1144560.html