Question

我在Bootstrap遇到了麻烦，这里有些人似乎都知道。我根据基本的“行”类网格约定设置了以下两个div，但是当我减小浏览器屏幕的大小时，它们没有按预期堆叠。他们只是保持固定。

更新

当我链接到bootstrap-responsive.css文件时，Bootstrap变得响应，如下所示。

然而，这些盒子超出了我预期和设置的最大网格尺寸（即原始安装中出现的默认值为940px，我再次通过LESS再次编译它来重新确认）。而且，它实际上超出了浏览器窗口的最右侧范围。 Chrome的屏幕截图（17.0.963.56）（屏幕截图中的开发人员工具中可以看到更多标记）：

http://static.inky.ws/image/1457/image.jpg

无论是否包含以下内容都会发生这种情况：

也许我以错误的方式使用bootstrap，但是我希望它能够响应所选的div（被归类为“row”，“spanX”等），但要停留在我选择的最大网格宽度上，并且至少要停在窗户的远处！

再次感谢您的时间，马特

HTML：

<div class="row-fluid"><!-- Intro begin -->
    <div class="span6">
        <p style="font-size: 18px;">
            <strong><span style="font-size: 20px;">Mingo makes it easy to share food with other people in your area.</span></strong>
        </p>
    </div>

    <div class="span6">
        <!--<img src="{{STATIC_URL}}images/pics/how_it_works.png" width="350px" style="margin-right: 20px;" />-->
        <div style="background-color: #E7F5DF; height: 250px; padding: 8px; border-radius: 8px;">
            <ul class="nav nav-pills" style="float: right;">
                <li class="active"><a href="#">How it works</a></li>
                <li><a href="#">Save time, save money</a></li>
            </ul>
            <div style="width: 99.5%; height: 87.5%; background-color: #c6e3b6; margin: 9.5% 0 0; border-radius: 8px; moz-border-radius: 8px;">
            </div>
        </div>
    </div>
</div><!-- Intro end -->

Answer 1

也许您只包含了bootstrap.css样式表而不是bootstrap-responsive.css样式表？

如果是这种情况，请尝试包括两者。

使用HTML标记和两个CSS文件，它似乎有效：http://jsfiddle.net/TimPetricola/KFnxs/

Answer 2

不要忘记包含

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在你的html标题中，否则移动浏览器缩小而不是改变布局以适应屏幕宽度。

为什么我的Bootstrap CSS div不能很好地堆叠？

2 个答案: