Question

我正在使用bootstrap制作响应式网页。当浏览器窗口大于屏幕大小的50％时，它按预期工作。我有一些嵌套在列元素内的列元素，它嵌套在一个行元素中。因此，每行有3个子列，然后每列有4个子列。问题可能正在发生，因为我有一个嵌套在列内的列，但如果是这种情况，那么当浏览器全屏时它也不会显示错误吗？

当窗口缩小到小于屏幕大小的50％时，大多数嵌套列显示为行。我不明白为什么会这样。

<div class="row foo" ng-repeat="foo in fooCtrl.foos">
                        <h4>{{foo.name}}</h4>
                        <div class="col-md-4 fuzz">
                            <h5>{{foo.type[0].fuzz}}</h5>
                            <!-- START BAR DISPLAY -->    
                                <div class="col-md-3 bar" ng-repeat="bar in barCtrl.bars">
                                    <h6>{{bar.name}}</h6>
                                </div>
                           <!-- END BAR DISPLAY -->
                        </div>
                       <!-- More columns -->
</div>

简单来说，当窗口大小<1时，条形图不会显示为列。 50％的屏幕。

Answer 1

col-md- *引导类仅适用于窗口宽度大于或等于992px的媒体查询断点。正如其他人所说，你需要使用col-xs- *，因为这是使用的默认类。

您可以在此处阅读更多内容：http://getbootstrap.com/css/#grid。作为最佳实践，您通常会使用类行包装可能构成div的行的最大列数;但是，在这种情况下，这可能不是您的具体问题。在大多数情况下，如果您使用默认网格设置，这是具有最小数字（n）（col - * - n）的元素集合，最多可加12个。

使用.bar分类元素的一些示例：

所有设备上的4列.bar元素：

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

超小型设备上的3列.bar元素，直到中型设备（宽度为992像素），此时将显示4列：

<div class="col-xs-4 col-md-3 bar">

2列.bar元素直到中型设备，然后每行4列：

<div class="col-xs-6 col-md-3 bar">

最后每行1个.bar元素到中型设备，然后每行4列：

<div class="col-xs-12 col-md-3 bar">

Answer 2

你需要在带有类行的较大列中有一个div。然后你需要知道，如果你要细分较大的列，引导程序的工作方式是你最多有12个细分，但是col的较小，比如col-sm-12。但我对这一切并不太确定。我已经阅读并重读了那些引导网格描述，我仍然试图理解它们。

<div class="row">
    <div class="col-md-4>
        <div class="row">
            <div class="col-sm-3">
            </div>
            <div class="col-sm-3">
            </div>
            <div class="col-sm-3">
            </div>
            <div class="col-sm-3">
            </div>
        </div>
    </div>
    <div class="col-md-4>
    </div>
    <div class="col-md-4>
    </div>
</div>

Answer 3

您只为md设置了尺寸。你还没有设置xs / sm / lg。 bootstrap的默认断点是768px，992px和1200px。我想你有一台高清显示器，md-breakpoint大约是屏幕尺寸的一半，视图将开始忽略col-md-x并使用col-sm-x

注意：如果没有其他设置也设置col-xs-12以防止奇怪的行为

列显示为窗口大小调整的行

3 个答案: