Bootstrap 3 响应式桌面和移动布局 [英] Bootstrap 3 responsive desktop and mobile layout

查看：26
本文介绍了Bootstrap 3 响应式桌面和移动布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用 bootstrap 3 设计我的响应式网站时，我无法让布局在桌面宽度分辨率 1366px v 786px 下工作.当布局减小到 1024px 时，它被认为是移动断点.

如何控制布局何时从桌面切换到移动布局?

这是我的html

<div class="container-fluid"><div class="container-fluid header"><div id="容器">

<div class="row-fluid"><div class="col-lg-3"><div class="well">

<div class="col-lg-9"><div class="col-lg-6"><div class="title"><h3>标题1</h3>

<div class="col-lg-6"><div class="title"><h3>标题2</h3>

解决方案

row-fluid 和 container-fluid 已从 BS 3 中弃用，所以现在您只需使用container 和 row

您可以使用新的小"网格类 (col-sm-*) 来防止布局在较小的显示器上堆积..

<div class="row"><div class="col-lg-3 col-sm-3"><div class="well">
<div class="col-lg-9 col-sm-9"><div class="col-lg-6 col-sm-6"><div class="well">
<div class="col-lg-6 col-sm-6"><div class="well">

演示:http://bootply.com/71450

如果您希望它永远不会堆叠，即使在最小的显示器上，请使用微小的 col-xs-* 网格类.

Using bootstrap 3 to design my responsive website, I'm having trouble getting the layout to work below a desktop width resolution of 1366px v 786px. When the layout is decreased down to 1024px, it is considered the mobile breakpoint.

How can I control when the layout switched from desktop to mobile layout?

this is my html

<body>
<div class="container-fluid">

    <div class="container-fluid header">
        <div id="container">        
        </div>
    </div>

    <div class="row-fluid">

        <div class="col-lg-3">
            <div class="well">

            </div>
        </div>

        <div class="col-lg-9">

            <div class="col-lg-6">
                <div class="title">
                    <h3>title 1</h3>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="title">
                    <h3>title 2</h3>
                </div>
            </div>

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

解决方案

The row-fluid and container-fluid are deprecated from BS 3, so now you just use container and row

You can use the new "small" grid classes (col-sm-*) to prevent the layout from stacking on smaller display..

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-sm-3">
            <div class="well">

            </div>
        </div>
        <div class="col-lg-9 col-sm-9">

            <div class="col-lg-6 col-sm-6">
                <div class="well">

            </div>
            </div>

            <div class="col-lg-6 col-sm-6">
                <div class="well">

                 </div>
            </div>

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

Demo: http://bootply.com/71450

If you want it to never stack, even on the smallest displays, use the tiny col-xs-* grid classes.

这篇关于Bootstrap 3 响应式桌面和移动布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆