无法在引导程序中设置平板电脑网格系统 - 附有小提琴

Question

我正在尝试为平板电脑版本安排引导网格系统。 我有15个箱子要安排。它与台式机和移动设备完美对齐，但无法针对平板电脑分辨率进行正确设置。 col-sm-*

.newcss{
    background-color: red;
    height: 120px;
    width: 120px !important;
    border-right: 5px solid white;
    border-bottom: 5px solid white;
}

<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-1"></div>
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 1</p>
    </div>
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 2</p>
    </div>
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 3</p>
    </div>

    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 4</p>
    </div>
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 5</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-1"></div>

    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 6</p>
    </div>

    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 7</p>
    </div>
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 8</p>
    </div>
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 9</p>
    </div>

    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 10</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-1"></div>
    <div class="col-xs-4 col-sm-2 newcss">
        <p>Box 11</p>
    </div>
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 12</p>
    </div>

    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 13</p>
    </div>
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 14</p>
    </div>
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 15</p>
    </div>
</div>

FIDDLE

请帮忙。

Answer 1

Bootstrap 基于 12 列布局，因此您错误地使用了网格。 您可以像这样在内容的左侧和右侧添加一些填充：

FIDDLE

.newcss {
            background-color: red;
            height: 120px;
            width: 120px !important;
            border-right: 5px solid white;
            border-bottom: 5px solid white;
            float: left;
        }

<div class="row">
        <div class="col-lg-3 col-md-3 col-sm-1 col-xs-1"></div>
        <div class="col-lg-6 col-md-6 col-sm-10 col-xs-10">
            <div class="newcss">
                <p>Box 1</p>
            </div>
            <div class="newcss">
                <p>Box 2</p>
            </div>
            <div class="newcss">
                <p>Box 3</p>
            </div>
            <div class="newcss">
                <p>Box 4</p>
            </div>
            <div class="newcss">
                <p>Box 5</p>
            </div>
            <div class="newcss">
                <p>Box 6</p>
            </div>
            <div class="newcss">
                <p>Box 7</p>
            </div>
            <div class="newcss">
                <p>Box 8</p>
            </div>
            <div class="newcss">
                <p>Box 9</p>
            </div>
            <div class="newcss">
                <p>Box 10</p>
            </div>
            <div class="newcss">
                <p>Box 11</p>
            </div>
            <div class="newcss">
                <p>Box 12</p>
            </div>
            <div class="newcss">
                <p>Box 13</p>
            </div>
            <div class="newcss">
                <p>Box 14</p>
            </div>
            <div class="newcss">
                <p>Box 15</p>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-1 col-xs-1"></div>
    </div>

Answer 2

虽然我不一定建议像您那样使用网格系统（强制的、绝对的高度和宽度，因为它首先否定了响应式网格的意义），但似乎有一个简单的解决您眼前的问题。您已经将这些 HTML 片段卡在代码中间的几个地方。

<div class="col-lg-3 col-md-3 col-sm-1"></div>

它不包含任何内容，并且具有推动您的布局的效果。摆脱那些，它似乎解决了你想要的。