CODEWITHSUNDEEP
csstwitter-bootstrap
nbg15
nbg15

Reputation: 129

Bootstrap CSS: "merge 2 columns to one big column"

i have tried to create a bootstrap grid for my 1st responsive shot...

my problem is I want to merge the red marked sections... how can I do this? i have already found some solutions, but these are not what i pref to do.

enter image description here

here is my HTML:

<div class="container">
    <div class="row top Matches">
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
    </div>
    <div class="row content">
        <div class="col-md-10"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-8"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-8"></div>
        <div class="col-md-2"></div>
    </div>
</div>

and my **CSS

    .top Matches {
  .make-row();
  .col-0-0 {
    .make-md-column(2);
  }
  .col-0-1 {
    .make-md-column(2);
  }
  .col-0-2 {
    .make-md-column(2);
  }
  .col-0-3 {
    .make-md-column(2);
  }
  .col-0-4 {
    .make-md-column(2);
  }
  .col-0-5 {
    .make-md-column(2);
  }
  .col-0-6 {
    .make-md-column(2);
  }
  .col-0-7 {
    .make-md-column(2);
  }
  .col-0-8 {
    .make-md-column(2);
  }
  .col-0-9 {
    .make-md-column(2);
  }
  .col-0-10 {
    .make-md-column(2);
  }
  .col-0-11 {
    .make-md-column(2);
  }
}
.content {
  .make-row();
  .col-1-0 {
    .make-md-column(10);
  }
  .col-1-1 {
    .make-md-column(2);
  }
  .col-1-2 {
    .make-md-column(2);
  }
  .col-1-3 {
    .make-md-column(8);
  }
  .col-1-4 {
    .make-md-column(2);
  }
  .col-1-5 {
    .make-md-column(2);
  }
  .col-1-6 {
    .make-md-column(8);
  }
  .col-1-7 {
    .make-md-column(2);
  }
}

and for some reasons my grid looks not really like my picture, but i hope I included bootstrap correctly...

here is my 1st fiddle!

https://jsfiddle.net/L5mL0v6p/

Thank you very much for any hints!!!

Upvotes: 1

Views: 6073

Answers (1)

Giovazz89
Giovazz89

Reputation: 401

If the rows you must join are always at the start or the end you could just nest a row with the parent floatig in the direction of the adiacent container border, for example:

  <div class="col-sm-12">
    full size div
  </div>
  <div class="col-sm-6">
    half
  </div>
  <div class="col-sm-6 pull-right">
    <div class="row">
      <div class="col-sm-12">
        stacked half
      </div>
      <div class="col-sm-12">
        stacked half
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    latter half
  </div>

instead, if you want a sure way, you can:

  <div class="col-sm-6">
    half
  </div>
  <div class="col-sm-3 ghost-col">
    <div class="row">
      <div class="col-sm-12">
        stacked fourth
      </div>
      <div class="col-sm-12">
        stacked fourth
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    latter fourth
  </div>
  <div class="col-sm-6">
    latter half
  </div>
  <div class="col-sm-3 col-sm-offset-3">
    offsetted fourth
  </div>

with .ghost-col > .row { position: absolute; } you just have to pay atention of overlapping pieces and avoid that using the offset to leave free space to the absolute positioned rows

Upvotes: 1

Related Questions