1 year ago

#366217

test-img

Piyush shrivastava

Automatically adjust margin of different data in of the single row

I am getting data , which first arranges itself into column by <div class="col-sm-6 col-lg-4 border-right mb-4"> and than into row by <div class ="row">. Now what happens if data in different column in row 1 takes different space that is some take more space than other , now the data in second row will adjust its margin-bottom according to the data which has max space in row 1, in this case some column of row 1 has less data and have space , which is not occupied by row 2 data because it adjust itself according max data of col of row 1.

In the image above the line between two blocks shows the space in second and third row is the problem. I want remove that space but its fixed due to position of the 1st column 1st row data.

enter image description here

The solution to this through css and bootstrap

<div class="dropdown-menu megamenu sm-menu border-top" aria-labelledby="navbarDropdown">

        <div class="row" style= "padding:auto">
          @foreach($subcategories as $subcategory)
          <div class="col-sm-6 col-lg-4 border-right mb-4">
            <h6>{{$subcategory->category_name}}</h6>
            @if(count($subcategory->subcategory))
                @include('layouts.subcategoryListlink',['subcategories' => $subcategory->subcategory])
            @endif
          </div>
          @endforeach
        </div>
      </div>

twitter-bootstrap

flexbox

vertical-alignment

margins

0 Answers

Your Answer

Accepted video resources