要知道引导网格系统中

Question

我正在使用bootstrap作为我的主页布局。我的内容有一列9个单元，侧栏有一个3单元列。侧边栏内的div是位置：固定。对于较小的屏幕引导程序，将我的侧栏发送到底部，这没关系。但是，那一刻我需要侧边位置相对。 我使用JavaScript来检查屏幕的宽度以更改位置属性，但我猜测当屏幕小于972px时，bootstrap会将我的侧边栏发送到底部。我怎么才能真正知道引导程序将我的侧边栏发送到底部的准确宽度？感谢任何帮助？谢谢。其他方法也很受欢迎。

<div class="container-fluid">
<div class="row">
    <div class="col-md-12">

        <div class="row">
            <div class="col-md-9">

                <div class="content"></div>


            </div>


            <div class="col-md-3">


                 <div class="sidebar"></div>


            </div>

        </div>

    </div>

</div>

剧本：

$(document).ready(function () {
    if ($(window).width() > 972) {
            $('.sidebar').css('position', 'fixed');

        }              
});

Answer 1

在Bootstrap首页上有它的信息。

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

还有xs是< 768px。

要获得完全控制权，请使用所有lg, md, sm and xs，并为每个设备/屏幕尺寸设置所需内容 只需使用像lg这样的内容，就可以在调整大小时更改内容。

添加 Fiddle 以帮助解决您的第二个问题。

我为你设置了一个全屏小提琴，调整窗口大小，看看当你调整大小时两个区域是如何并排放置的。
这就是你想要的控制它。

<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 bg-success block">

</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 bg-primary block">

</div>

<强>加

点击F12

Answer 2

您使用的引导断点是md（中型设备）。

因此，当屏幕宽度> = 992px时，它将与您的主要内容div并排。当它<= 991px时，它将低于。

http://getbootstrap.com/css/#grid