Question

我正在尝试为平板电脑版安排引导网格系统。我有15个盒子要安排。它非常适合桌面和移动设备，但无法将其设置为平板电脑分辨率。 col-sm-*

＆＃13;

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

＆＃13;

<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>

＆＃13;

FIDDLE

请帮忙。

Answer 1

虽然我不一定建议像你一样使用网格系统（有强制，绝对高度和宽度，因为它首先否定了响应网格的意义），似乎有一个简单的解决您当前的问题。你可以在几个地方的代码中间粘贴这些HTML。

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

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

Answer 2

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

FIDDLE

＆＃13;

print("Are you a mutant?")
answer = input()
if    'Yes':
    print("Your application to Xavier's School for Gifted Youngsters has been accepted")
elif 'No':
    print("Your application was not successful on this occassion")

＆＃13;

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

＆＃13;

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

2 个答案: