Question

我有一个包含11列的网格

<div class="row">
    <div class="col-lg-1">1</div>
    <div class="col-lg-1">2</div>
    <div class="col-lg-1">3</div>
    <div class="col-lg-1">4</div>
    <div class="col-lg-1">5</div>
    <div class="col-lg-1">6</div>
    <div class="col-lg-1">7</div>
    <div class="col-lg-1">8</div>
    <div class="col-lg-1">9</div>
    <div class="col-lg-1">10</div>
    <div class="col-lg-1">11</div>
</div>

我的问题是bootstrap在12列网格上工作，因此第12列显示为空。（使网格看起来不居中）

我想将这个网格居中，所以在网格的开头会有半个列的空间，在网格的末尾会显示另一半：

<div class="row">
    <div class="col-lg-1/2">1/2 blank</div>
    <div class="col-lg-1">1</div>
    <div class="col-lg-1">2</div>
    <div class="col-lg-1">3</div>
    <div class="col-lg-1">4</div>
    <div class="col-lg-1">5</div>
    <div class="col-lg-1">6</div>
    <div class="col-lg-1">7</div>
    <div class="col-lg-1">8</div>
    <div class="col-lg-1">9</div>
    <div class="col-lg-1">10</div>
    <div class="col-lg-1">11</div>
    <div class="col-lg-1/2">1/2 blank</div>
</div>

^这是我想象它会起作用的一个例子，但不幸的是我们在boostrap上没有1/2列。

Answer 1

您可以随时创建一个半尺寸的列以添加到补充样式表中（但是，您希望确保考虑所有样式）：

.col-lg-half {
    width: 4.166666665%;
}

.col-lg-half
{
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 1200px) {
    .col-lg-half {
        float: left;
    }
}

然后，你想要的东西应该有用。

<div class="row">
    <div class="col-lg-half">1/2 blank</div>
    <div class="col-lg-1">1</div>
    <div class="col-lg-1">2</div>
    <div class="col-lg-1">3</div>
    <div class="col-lg-1">4</div>
    <div class="col-lg-1">5</div>
    <div class="col-lg-1">6</div>
    <div class="col-lg-1">7</div>
    <div class="col-lg-1">8</div>
    <div class="col-lg-1">9</div>
    <div class="col-lg-1">10</div>
    <div class="col-lg-1">11</div>
    <div class="col-lg-half">1/2 blank</div>
</div>

在bootstrap上对齐11列，如何处理缺少的列？

1 个答案: