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 列，换句话说 - 向一边，即使它应该是相反的方式。但我想这是因为在下一步中，文章和旁白将通过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属性的值时，real width列并没有改变。

• 列宽由.col-xx-n类设置，设置为父容器（.row元素）宽度的n/12

• 通过两种方法设置列的位置：

  • .col-xx-offset-n 类将列向右侧移动容器宽度的 n/12 值。这是通过将n * 100% / 12 的值应用于列的left-margin 属性来完成的。

  • .col-xx-push/pull-n 类将列向 left/right 移动容器宽度的 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列。

希望对您有所帮助。