Non 12-divisible Equal columns on Bootstrap 4

问题

I have a little web app that I want to show 5 columns responsive equal width.

But I only want this layout for a devices with ≥992px of width. For devices <992px of width I want to show the 5 HTML elements in one full-width row.

Equal-width columns can be broken into multiple lines, but there was a Safari flexbox bug that prevented this from working without an explicit flex-basis or border.

Two workarounds have been documented in a reduced test case outside Bootstrap, though if the browser is up to date this shouldn’t be necessary.

Source: https://getbootstrap.com/docs/4.0/layout/grid/

So, I'm a bit confused in how can I achieve this responsive behaviour that I want using Bootstrap 4.

I have this "idea", but I think will pretty ugly, what do you think about it?

Let's consider this markup

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="sep"></div>
    <div class="col">Column</div>
    <div class="sep"></div>
    <div class="col">Column</div>
    <div class="sep"></div>
    <div class="col">Column</div>
  </div>
</div>

Then, with jQuery I can select .sep and add bootstrap4 class w-100 in the case of width <992px.

Thanks for reading and please forgive my bad english.

回答1:

Maybe I don't understand the question. Why not just use the lg auto layout columns (col-lg)?

https://www.codeply.com/go/OohsSfM7Zu

<div class="row">
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
</div>

回答2:

The first thing to remember about Bootstrap is that rows must contain 12 columns. If you have a row with a number that doesn't go into 12 (such as 5), you should be making use of offsets.

For example, 12 / 5 is 2, with 2 left over. So you want to make use of columns that occupy a width of 2, for a total of 10 columns. From here, you would offset by 1 on the left. Considering you now have a total of 11, you've automatically also offset by 1 on the right.

This can be demonstrated in the following:

.row {
  margin: 0 !important; /* Prevent scrollbars in the fiddle */
  text-align: center; /* Helps illustrate the centralisation */
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<div class="row">
  <div class="col-sm-2 offset-sm-1">One</div>
  <div class="col-sm-2">Two</div>
  <div class="col-sm-2">Three</div>
  <div class="col-sm-2">Four</div>
  <div class="col-sm-2">Five</div>
</div>

If you're not happy with this offset, then you can simply make use of a custom media query such as width: calc(100% / 5) ...though this would completely violate the point of using Bootstrap; another framework might be more suitable :)

Hope this helps!

来源：https://stackoverflow.com/questions/47858501/non-12-divisible-equal-columns-on-bootstrap-4

标签

css

twitter-bootstrap

flexbox

bootstrap-4