Question

我有以下简单的标记：

<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方法）

Answer 1

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

我不相信bootstrap意图使@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>

希望这有帮助，

在Twitter Bootstrap中隐藏移动设备侧边栏的样式问题

1 个答案: