Question

这是我的问题。我已经搞乱了这几天了，除了一个做我想做的事的网站之外我一直无法找到解决办法，我似乎无法复制它。那个网站是here。当您向下移动到移动大小的应用程序时，日历会保留原始日历的形式，即不会开始堆叠日期。这是我的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>"Stars"</title>
    <meta name="viewport" content="width-device-width, intial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content ="">
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="dist/js/bootstrap.min.js"></script>
</head>     
<body>
<div class ="container">
    <div class="row">   
        <div class = "span6">
            <center>
            <div class = "jumbotron">
            <div class = "row-xs-1">
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            </div>

            <div class = "row-xs-1">
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            </div>

        </div>
    </center>
    </div>
</div>

</body>

</html>

如果您运行此代码，您将看到一切看起来都很好，但内容不会在移动级别甚至平板电脑级别保持相同的行。很感谢任何形式的帮助。我一直试图弄清楚如何做这几天，因为我不会浪费任何人的时间。

亲切的问候，

乙

编辑：

好的，让我添加几个屏幕截图，以帮助澄清这里的事情。我有一个10x10网格的按钮。（从上面略微修改了代码......我删除了一堆臃肿的代码，以避免让每个人头痛。 enter image description here 如果我向下移动以查看移动设备的大小，则会发生这种情况：

我需要的是进入移动环境时，按钮保持10x1行，原始的10x1不会被黑客攻击到移动和桌面查看区域的堆叠5x2。

Answer 1

尝试使用span定义div内的按钮，因为您需要在每个视图中查看移动视图或桌面，请在bootstrap文档中查看此示例http://getbootstrap.com/css/#grid-example-basic。

如何使容器不调整按钮大小？ CSS Bootstrap3响应

1 个答案: