Question

我目前正在使用Bootstrap来处理我的网格布局。我试图做的一件事是保持列布局的完整性，而不是在屏幕分辨率降低时以响应方式堆叠。

我可以在此处看到我想要的行为示例：http://demos.telerik.com/kendo-ui/grid/index

如果您水平缩小屏幕，您可以看到在某些时候，内容区域被推离屏幕，允许您滚动以查看溢出内容。我想使用Bootstraps col和rows这种行为。

这是一个JSFiddle：https://jsfiddle.net/jntpme3f/

如果水平缩小屏幕，则可以看到列因为应用了最小宽度而堆叠。我需要这些列具有最小宽度，但我还需要它们保持与它们最初相同的行布局。我该如何实现这一目标？

HTML

<div class="row-fluid">
    <div class="col-sm-3 box"></div>
    <div class="col-sm-3 box"></div>
    <div class="col-sm-3 box"></div>
    <div class="col-sm-3 box"></div>
</div>

CSS

.box {
    height: 300px;
    border: 1px solid grey;
    min-width: 275px;
}

Answer 1

如果您希望列也保留在移动设备的行中，则必须从引导站点中删除响应式布局。从<head>代码中删除此行：<meta name="viewport" content="width=device-width, initial-scale=1">

Bootstrap col用滚动溢出而不是相互堆叠

1 个答案: