0

我有以下简单的标记：

<div class="container">
    <div class="row">
        <div class="span8">
            <!- Main page -->
        </div>
        <div class="span4 visible-desktop">
            <!- Right-hand Sidebar -->
        </div>
    </div>
</div>

基本上，我想要的只是删除非桌面设备的侧边栏，以便主页占据整个宽度。

使用标记后，侧边栏在较小的屏幕（例如平板电脑）上不可见，但主要位不会延伸到整个屏幕，它只会留下一个白色间隙。

在非常小的屏幕（例如手机）上，侧​​边栏确实会正确消失 - 我认为这是没有空间的时候。

如何更改标记/样式以使其按平板电脑设备的要求工作？

（我知道 jQuery 是一种选择，但如果可能的话，我更喜欢非 js 方法）

4

1 回答 1

2

好的，所以更新了我的问题，因为我第一次没有正确理解我的 OP 问题。

我不相信引导程序希望 @media 标记以这种方式工作，但您可以针对目标媒体大小编辑 bootstrap-responsive.css 代码。

您应该在 css 文件中看到类似的内容

media (min-width: 768px) and (max-width: 979px) {
    .row {
         margin-left: -20px;
         *zoom: 1;
    }
.
.
.
    .magepage{
         width:100%;
    }
}

让你的代码像这样

<div class="container">
    <div class="row">
        <div class="span8 mainpage">
            <!- Main page -->
        </div>
        <div class="span4 visible-desktop">
            <!- Right-hand Sidebar -->
        </div>
    </div>
</div>

希望这可以帮助，

于 2012-09-19T23:53:11.840 回答