Question

下面有一个标记，我不明白网格系统的行为。

我有container。 container有一个孩子，row，而row有三个孩子div，其中col-lg班。

我了解lg断点及更高点发生了什么 - 我们正在创建 3 等宽列。 lg中的col-lg指定要定位的断点，因为我们没有为div指定大小（例如，col-lg-2），所以它们是等宽的。

我的问题是，在小于lg的断点处发生了什么？我可以看到行为是div内的每个row占据了所有12列，但这种行为背后的逻辑使我无法理解。

<div class="container pt-4" id="about">
  <div class="row">

    <div class="col-lg order-lg-2">
      <h3 class="mb-4">About Full Stack Conf</h3>
      <img class="mb-4 img-fluid rounded d-none d-sm-block" src="img/portland.jpg" alt="Portland, Oregon"/>
      <p>The beautiful city of Portland, Oregon will be the host city for Full Stack Conf!</p>
      <p>Explore the future of JavaScript with a lineup of industry professionals. Discover new techniques to advance your career as a web developer.</p>
    </div>

    <div class="col-lg order-lg-1">
      <h3 class="mb-4">Expert Speakers!</h3>
      <p>Our expert speaker lineup was just announced, so don't wait too long before grabbing your tickets!<p>
      <p>Nullam at iaculis augue. Maecenas nec pulvinar est, rutrum sodales quam. Aenean quis ornare orci. Praesent diam est, accumsan ac magna in, mattis mattis orci. Etiam turpis eros, tristique accumsan.<p>
      <p>Nunc gravida ultricies turpis, et varius leo malesuada quis. Proin scelerisque vitae leo eu tincidunt. Donec vestibulum urna ut ante venenatis congue. Fusce vehicula condimentum pharetra. Nulla fringilla dolor mauris.<p>
    </div>

    <div class="col-lg order-lg-3">
      <h3 class="mb-4">What You'll Learn</h3>
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action"><strong>MongoDB</strong>: NoSQL Database</a>
        <a href="#" class="list-group-item list-group-item-action"><strong>Express</strong>: Framework for Node</a>
        <a href="#" class="list-group-item list-group-item-action"><strong>React</strong>: JavaScript library</a>
        <a href="#" class="list-group-item list-group-item-action"><strong>Node.js</strong>: JavaScript environment</a>
        <a href="#" class="list-group-item list-group-item-action"><strong>ES2015</strong>: Latest version of JavaScript</a>
        <a href="#" class="list-group-item list-group-item-action"><strong>Babel</strong>: JavaScript compiler</a>
      </div>
    </div>
  </div>
</div>

Answer 1

所以，让我解释一下，例如.col-lg定义它是什么意味着你在断点中定义.col所以.col-lg意味着

@media (min-width: 992px)
.col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

任何类别无关紧要哪个断点如.col-lg, .col-sm, .col-xl, .col-md都具有与移动第一种方法相同的样式，所以如果你没有定义某个断点在最后一个断点后它会全宽。在您定义的最后一个断点之后它总是会缩小

因此它采用这种风格，一旦你没有通过默认定义任何东西，bootstrap的所有.col类都采用这种风格

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

这就是为什么它跨越整个宽度所以断点它总是更强比类

网格系统行为未指定div宽度时

1 个答案: