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

我的方式是：

首先为文章和旁边的列添加了col-lg-*个测量值。因此，文章占据了8列，旁边占据了3列。
然后col-lg-offset-1被添加到文章中，所以它会被向右推1个，换句话说 - 就此而言，即使它应该是另一种方式。但我想这是因为在下一步中，文章和旁边将通过push/pull交换，这将是有道理的。
col-lg-push-3，并将col-lg-pull-9添加到了旁边。这就是我被困住的地方。基本上你希望文章占据9列，那么为什么要添加col-push-3呢？通用逻辑说它应该是push-9。同样如此。
最后，一旦文章和旁边与push/pull交换，如何应用偏移量？应用push/pull后，文章涵盖9列，旁边包含3列。那么偏移的1列在哪里，最初应用于文章？现在是否覆盖了col-lg-*次测量？

非常感谢所有的帮助！

Answer 1

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

使用border-box模型计算所有列维度。因此，当我们更改border-width和padding属性的值时，实际宽度列不会更改。
列的宽度由.col-xx-n类设置。它设置为父容器宽度的n / 12（.row元素）
< / LI>
通过两种方法设置列的位置：
- .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列。

希望得到这个帮助。

Bootstrap网格系统中推/拉和偏移的作用

1 个答案: