推拉和偏移在引导网格系统中的作用

Question

我正在学习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>

编写此代码的顺序遵循这种方法--首先添加大小类，然后添加偏移量，最后添加push/pull类。我很难弄清楚这三者是如何一起工作的。

例如，只要选择col-lg-*场景，push/pull如何与现有的col-lg-8 col-lg-offset-1 for article和col-lg-3 for aside一起工作？

我的方式是：

1. 首先，文章和旁列都添加了col-lg-*度量。因此，文章占据了8列，旁边占据了3列。
2. 然后，col-lg-offset-1被添加到文章中，这样它就会被推到右边，换句话说--向一边，尽管它应该是相反的。但我想这是因为在接下来的步骤中，文章和旁白将通过push/pull交换，这将是有意义的。
3. col-lg-push-3被添加到文章中，col-lg-pull-9被添加到一边。这就是我被困的地方。本质上，您希望文章占据9列，那么为什么要添加col-push-3呢？一般的逻辑说它应该是push-9。在一旁也是如此。
4. 最后，文章和旁白与push/pull交换后，如何应用偏移量？随着push/pull的应用，文章涵盖了9列，备用覆盖了3列。那么，1列偏移量(最初应用于文章)去了哪里呢？这些col-lg-*度量现在是否被覆盖？

非常感谢你的帮助！

Answer 1

以下是我对Bootstrap 3网格系统的理解：

• 所有的列尺寸都是使用border-box模型计算的。因此，当我们更改border-width和padding属性的值时，实宽度列不会更改。
• 列的宽度由.col-xx-n class.It设置为父容器( .row元素)宽度的n/12
• 列的位置是通过两种方法设置的：

- The `.col-xx-offset-n` class moves the column to the **right** by a value of n/12 of the width of the container. This is done by applying a value of `n * 100% / 12` to the `left-margin` property to the column.
- The `.col-xx-push/pull-n` class moves the column to the **left**/**right** by a value of n/12 of the width of the container. This is done by applying a value of `n * 100% / 12` to the `left`/`right` property to the column.

​

例如，让我们在大屏幕上看到您的article元素。我们将当前的.row元素划分为12列，称为列1-列12。

• 其宽度设置为.row元素宽度的8/12。它现在的位置是从第一栏到第八栏。
• 它被.col-lg-offset-1类推到右边的1列。现在，它的位置从第2列到第9列(左边框填充第1列)。
• 当.col-lg-push-3类应用于该列时，该列本身现在被移动到左边的3列。现在的位置是从第四栏到第十一栏。
• 还记得.col-lg-offset-1类吗?它留下了边距？左边框现在填充第4列。最后，现在列的位置是从第5列到第12列。

希望能帮上忙。