Add spacing between vertically stacked columns in Bootstrap 4

后端未结

关注

 4  1848

Unfortunately, there doesn\'t seem to be a good way to manage vertical spacing between columns that transition from a horizontal stack to a vertical stack at certain breakpo

相关标签:

4条回答

一整个雨季

2020-11-30 10:20

Here's how I ended up making this work:

.row [class*="col-"] { 
   @extend .mb-4;

   &:last-child {
     @extend .mb-0;
   }

   @extend .mb-md-5;

   &:nth-last-of-type(1),
   &:nth-last-of-type(2),
   &:nth-last-of-type(3) {
     @extend .mb-md-0;
   }
}

0 讨论(0)

醉话见心

2020-11-30 10:22

see snippet below or jsfiddle

it will work regardless how many cols you have or rows

first ( on big screen ) all rows have margin-bottom except the last one then on medium screen , the rows won't have any margin and the cols will all have margin-bottom except the last col from the last row

.row {
	margin-bottom:30px;
}
.row:last-child{
	margin-bottom:0;
}
.row [class*="col-"] { 
   border:1px solid red;
}

@media only screen and (max-width: 768px) {
	.row { 
	margin:0
	}
	.row [class*="col-"]  {
		margin-bottom:30px;
	}
	.row:last-child [class*="col-"]:last-child{
		margin-bottom:0;
	}
}

<body>

<h1 class="display-3">
hey
</h1>

  <div class="container">

    <div class="row">

      <div class="col-md-4 col-lg-4">
        col 1
      </div>

      <div class="col-md-4 col-lg-4">
        col 2
      </div>

      <div class="col-md-4 col-lg-4">
        col 3
      </div>
</div>
<div class="row">
      <div class="col-md-4 col-lg-4">
        col 4
      </div>

      <div class="col-md-4 col-lg-4">
        col 5
      </div>

      <div class="col-md-4 col-lg-4">
        col 6
      </div>

    </div>

  </div>

</body>

0 讨论(0)

无人共我

2020-11-30 10:39

I ended up with this solution:

@include media-breakpoint-down(xs) {
  [class*="col-sm"]:not(:last-child){
    margin-bottom: 15px;
  }
}

@include media-breakpoint-down(sm) {
  [class*="col-md"]:not(:last-child){
    margin-bottom: 15px;
  }
}

@include media-breakpoint-down(md) {
  [class*="col-lg"]:not(:last-child){
    margin-bottom: 15px;
  }
}

0 讨论(0)

挽巷

2020-11-30 10:42
Use the new Bootstrap 4 spacing utilities. For example mb-3 adds margin-bottom of 1rem.
No extra CSS is needed.

http://www.codeply.com/go/ECnbgvs9Ez
```
<div class="container">
    <div class="row">
      <div class="col-md-4 mb-3">
        col 1
      </div>
      <div class="col-md-4 mb-3">
        col 2
      </div>
      <div class="col-md-4 mb-3">
        col 3
      </div>
      <div class="col-md-4 mb-3">
        col 4
      </div>
      <div class="col-md-4 mb-3">
        col 5
      </div>
      <div class="col-md-4">
        col 6
      </div>
    </div>
</div>
```
The spacing utils are responsive so you can apply them for specific breakpoints (ie; mb-0 mb-md-3)

If you want a CSS solution, use the solution explained in the related 3.x question (it's not dependent on using a form): https://jsfiddle.net/zdLy6jb1/2/
```
/* css only solution */
[class*="col-"]:not(:last-child){
  margin-bottom: 15px;
}
```
Note: the col-lg-4 is extraneous in your markup since col-lg-4 col-md-4,
is the same as col-md-4.
0 讨论(0)
发布评论:

提交评论
- 加载中...