当前位置：文江博客话题详情

bootstrap 手机页面自动换行

发布于 2022-09-04 14:09:34 字数 301 浏览 9 评论 0

我在做一个页面，这部分是论坛回复样式
正方形的是头像，长方形是ID，红色是时间，蓝色是楼层浮动

现在我想页面缩小到手机大小的时候，红色的时间可以显示在ID下面

我的想法是用 js 加元素，但是请问有没有更好的方法。

用的是 bootstrap

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心凉怎暖 2022-09-11 14:09:35

示例代码：（用于演示所以用的是CDN的Bootstrap）
其中，

蓝色的是头像部分
红色的是中间的外框，用来包裹时间和ID部分，为了方便看清红色区域，这个外框上下给了10px的边距，实际开发中并不需要
橙色为ID区域，淡绿色为时间区域
淡蓝色为右侧浮动区
HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style type="text/css">
        ul li {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .avatar {
            background-color: blue;
            color: white;
        }

        .id {
            background-color: orange;
        }

        .time {
            background-color: lightgreen;
        }

        .wrapper {
            background-color: red;
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .float {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <div class="col-xs-1 avatar">
                AVATAR
            </div>
            <div class="col-xs-5 wrapper">
                <div class="col-xs-12 col-md-6 id">ID</div>
                <div class="col-xs-12 col-md-6 time">TIME</div>
            </div>
            <div class="col-xs-6 float">
                FLOAT
            </div>
        </li>
    </ul>
</body>
</html>

宽屏下效果：

窄屏下效果：

这个的关键在于col-xs-12 col-md-6这两个class类，.col-xs-12表示在所有设备（比超小屏幕大的任何屏幕上），此元素都占父元素的12个格子（Bootstrap格子布局将父元素竖向等分12份，所以12个格子也就是整个父元素宽度）。col-md-6表示在所有中等以上设备（也就是平板或者电脑设备）上，此元素占父元素的6个格子，也就是占父元素的一半宽度，这样两个col-md-6就可以并排了。

因为col-md-*类会覆盖col-xs-*的设置，所以只有在手机上会占满父元素，id和time在电脑和平板上只父元素12列中的6列，也就是各占一半，也就达到了你所要的效果了。

回复收藏 0