上QQ阅读APP看书，第一时间看更新

Auto-layout of columns

If you are not concerned about viewport-dependent column sizes, then you can use the non-breakpoint-specific column classes: col-*. Using these classes, you can both set equal-width columns and specify your exact column sizes. Using equal-width columns, our aforementioned nested print sizes example will translate into the following (note the use of the unnumbered col class):

<div class="col-6 col-sm-3">
   <h5>Extra Large</h5>
   <div class="row">
      <div class="col">24x36</div>
      <div class="col">27x39</div>
      <div class="col">27x40</div>
   </div>
</div>

Since this feature also relies on Flexbox, it is important to note the following observation taken from the Bootstrap 4 documentation:

“Equal-width columns can be broken into multiple lines, but there is a Safari flexbox bug that prevents this from working without an explicit flex-basis or border. Our example works thanks to the border being set; you can do the same with .col { border: 1 px solid transparent; }. Alternatively, you can set the flex-basis to the width of the column (for example, .col { flex: 1 0 50%; }).” ( http://getbootstrap.com/docs/4.0/layout/grid/#flex-order)

Behind the scenes, Bootstrap defines col using 6 simple rules:


.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

The first two rules basically set the element’s size to 0, hence giving us a clean slate to work with. It should be noted that the second rule—flex-basis—should not be confused with flex-width: the former works along both axes, while the latter only sets the horizontal width of an element. The flex-grow property defines the factor of the amount of space that the element can take up. Last, but not least, Bootstrap explicitly defines the maximum width of the element to be 100%, that is, the element can take up all the available space.

If we do not wish our columns to take on an equal width but wish to specify a viewport size independent width, we simply prepend the col class with a number ranging from 1 to 12 (just as is the case with the viewport-sensitive col classes). Let's assume that we wish to make the last resolution in our nested column wider than the previous two. In this case, we will replace the col class for the div containing the 27x40 text with col-6. To allow us to visualize this change better, we will also change the column's background color to light blue (refer to figure 2.12):

<div class="col-6 col-sm-3">
   <h5>Extra Large</h5>
    <div class="row">
    <div class="col">24x36</div>
    <div class="col">27x39</div>
    <div class="col-6" style="background: lightblue;">27x40</div>
    </div>
</div>

The col-* classes are defined by Bootstrap using a combination of the flex element's growth factor property and its maximum width property. For example, col-1 is defined as follows:

.col-1 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

Note that flex is a "shorthand property that sets flex-grow, flex-shrink, and flex-basis" (source: https://developer.mozilla.org/en-US/docs/Web/CSS/flex).

Figure 2.12: Using Bootstrap's col-* to create viewport size independent columns (example10.html)

Another common use case requiring auto sizing is when one wants to adjust the size of a column based on the column's content (and not based off of some fixed dimension). For this instance, Bootstrap provides us with the col-*-auto class, where * within this context refers to the breakpoint (sm, md, lg, and xl). Consider this example:

<div class="col-6 col-sm-3">
  <h5>Extra Large</h5>
  <div class="row">
  <div class="col">24x36</div>
  <div class="col">27x39</div>
  <div class="col-md-auto" style="background: lightblue;">Other            dimensions</div>
  </div>
</div>

Figure 2.12.1: Using Bootstrap's col-*-auto to automatically adjust the size of a column based on its content (example10.1.html)

Last, but not least, columns can be forced onto new lines by inserting an element with the w-100 class:

<div class="col-sm-3">
      <h5>Extra Large</h5>
      <div class="row">
          <div class="col">24x36</div>
          <div class="col">27x39</div>
          <div class="w-100"></div>
          <div class="col">27x40</div>
      </div>
</div>

The w-100 class simply sets the width of the element to 100%, forcing it to take up all the available horizontal space. Bootstrap offers a range of classes at a 25% interval: w-25, w-50, w-75, and w-100. Their vertical equivalents are h-25, h-50, h-75, and h-100.