推/拉和偏移在 Bootstrap 網格系統中的作用

Question

我正在學習 Bootstrap，並且在 Bootstrap 網格系統中使用時遇到了一些offset和push / pull問題。

我正在關注的教程有以下代碼：

 <!-- row 2 -->
    <div class="row">

        <article class="col-lg-offset-1 col-sm-offset-1 col-lg-8 col-sm-7 col-lg-push-3 col-sm-push-4">
            <h1>Services</h1>
            <p><img src="img/cockatiel.jpg" class="pull-right">Wisdom Pet Medicine is a state-of-the-art veterinary hospital, featuring the latest in diagnostic and surgical equipment, and a staff of seasoned veterinary specialists in the areas of general veterinary medicine and surgery, oncology, dermatology, orthopedics, radiology, ultrasound, and much more. We also have a 24-hour emergency clinic in the event your pet needs urgent medical care after regular business hours.</p>
            <p>At Wisdom, we strive to be your pet&rsquo;s medical experts from youth through the senior years. We build preventative health care plans for each and every one of our patients, based on breed, age, and sex, so that your pet receives the most appropriate care at crucial milestones in his or her life. Our overarching goal is to give your pet the best shot possible at a long and healthy life, by practicing simple preventative care. We even provide an online Pet Portal where you can view all your pet&rsquo;s diagnostic results, treatment plans, vaccination and diagnostic schedules, prescriptions, and any other health records.</p>
        </article>


        <aside class="col-lg-3 col-sm-4 col-lg-pull-9 col-sm-pull-8">
            <h3>Keeping your pet's chompers clean and healthy</h3>
            <p>You know the importance of brushing your own teeth, but did you know that dogs and cats also need regular attention to their pearly whites? Poor dental hygiene in pets can lead to periodontal disease, a bacterial infection which causes bad breath, drooling, tooth decay, and tooth loss.</p>
            <p>As always, if you have questions about your pet’s dental or health care, please <a href="#">contact Wisdom Pet Medicine</a> for advice.</p>
        </aside>
    </div>

此代碼的編寫順序遵循這種方法 - 首先添加大/小類，然后添加偏移量，最后添加推/拉類。 我在弄清楚這三個如何協同工作時遇到了一些麻煩。

例如，只需挑選col-lg-*場景， push/pull如何與現有的col-lg-8 col-lg-offset-1用於article和col-lg-3用於aside ？

我的方式是：

1. 首先，為文章和邊欄添加col-lg-*測量值。 因此，文章占據了 8 列，而旁注占據了 3 列。
2. 然后col-lg-offset-1被添加到文章中，因此它會被推向右側 1 col，換句話說 - 推向一邊，即使它應該是相反的。 但我想這是因為在下一步中，文章和邊將通過push/pull交換，然后才有意義。
3. col-lg-push-3被添加到文章中， col-lg-pull-9被添加到一邊。 這是我被困的地方。 本質上你想讓文章占據 9 列，那么為什么要添加col-push-3呢？ 通用邏輯說它應該是push-9 。 放在一邊也一樣。
4. 最后，一旦 article 和 side 與push/pull交換，如何應用偏移量？ 應用push/pull ，文章覆蓋 9 列，側邊覆蓋 3 列。 那么最初應用於文章的1列偏移量去了哪里？ 現在是否覆蓋了col-lg-*測量值？

非常感謝所有的幫助！

Answer 1

這是我對 Bootstrap 3 網格系統的理解：

• 所有列尺寸均使用border-box模型計算。 所以，當我們改變border-width和padding屬性的值時，真正的寬度列並沒有改變。

• 列的寬度由.col-xx-n設置。它設置為父容器（ .row元素）寬度的 n/12

• 列的位置通過兩種方法設置：

  • .col-xx-offset-n類將列向右移動容器寬度的 n/12 值。 這是通過將n * 100% / 12的值應用於列的left-margin屬性來完成的。

  • .col-xx-push/pull-n類將列向左/向右移動容器寬度的 n/12 值。 這是通過將n * 100% / 12的值應用於列的left / right屬性來完成的。

例如，讓您在大屏幕中查看您的article元素。 我們將當前.row元素划分為 12 列，稱為第 1 列 - 第 12 列。

• 它的寬度設置為.row元素寬度的 8/12。 它現在的位置是從第 1 列到第 8 列。

• 它被.col-lg-offset-1類推向右側的 1 列。 現在，它的位置現在是從第 2 列到第 9 列（它的左邊距填充了第 1 列）。

• 當.col-lg-push-3類應用於列時，列本身現在移動到左側 3 列。 它現在的位置是從第 4 列到第 11 列。

• 還記得.col-lg-offset-1類和它的左邊距嗎？ 左邊距現在填充第 4 列。 最后，列位置現在是從第 5 列到第 12 列。

希望這有幫助。