mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-15 15:29:22 +01:00
Allow override default col width
This commit is contained in:
parent
d08567797f
commit
afc9cae32c
@ -46,16 +46,6 @@
|
|||||||
@include make-row();
|
@include make-row();
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
||||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
|
||||||
|
|
||||||
@for $i from 1 through $grid-row-columns {
|
|
||||||
.row-cols#{$infix}-#{$i} {
|
|
||||||
@include row-cols($i);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove the negative margin from default .row, then the horizontal padding
|
// Remove the negative margin from default .row, then the horizontal padding
|
||||||
// from all immediate children columns (to prevent runaway style inheritance).
|
// from all immediate children columns (to prevent runaway style inheritance).
|
||||||
.no-gutters {
|
.no-gutters {
|
||||||
|
@ -33,6 +33,13 @@
|
|||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@for $i from 1 through $grid-row-columns {
|
||||||
|
.row-cols#{$infix}-#{$i} {
|
||||||
|
@include row-cols($i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.col#{$infix}-auto {
|
.col#{$infix}-auto {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
@ -56,7 +56,8 @@
|
|||||||
// numberof columns. Supports wrapping to new lines, but does not do a Masonry
|
// numberof columns. Supports wrapping to new lines, but does not do a Masonry
|
||||||
// style grid.
|
// style grid.
|
||||||
@mixin row-cols($count) {
|
@mixin row-cols($count) {
|
||||||
& > [class^="col"] {
|
& > * {
|
||||||
flex: 0 0 calc(100% / #{$count});
|
flex: 0 0 100% / $count;
|
||||||
|
max-width: 100% / $count;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -381,6 +381,20 @@ Use these row columns classes to quickly create basic grid layouts or to control
|
|||||||
{% include example.html content=example %}
|
{% include example.html content=example %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="bd-example-row">
|
||||||
|
{% capture example %}
|
||||||
|
<div class="container">
|
||||||
|
<div class="row row-cols-4">
|
||||||
|
<div class="col">Column</div>
|
||||||
|
<div class="col">Column</div>
|
||||||
|
<div class="col-6">Column</div>
|
||||||
|
<div class="col">Column</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
{% include example.html content=example %}
|
||||||
|
</div>
|
||||||
|
|
||||||
You can also use the accompanying Sass mixin, `row-cols()`:
|
You can also use the accompanying Sass mixin, `row-cols()`:
|
||||||
|
|
||||||
{% highlight scss %}
|
{% highlight scss %}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user