0

I have this page where you click on a text block, the box opens comments below it. The row below it shifts down then. Problem is that ALL columns in the row below shift down, which creates a ton of whitespace.Only 1 should shift down (the one below the expanded cell). Is there a way to do this with bootstrap 3?

lukasgeiter
  • 147,337
  • 26
  • 332
  • 270
user2475825
  • 21
  • 1
  • 1
  • 7

1 Answers1

0

Yes, you need to change the layout of your grid. you wouldn't lay them out 3 across to a row, you would lay them out going down in columns.

<div class="row">
    <div class="col-sm-3">
        <div class="idea-block"> ... </div>
        <div style="display: none;" class="comment-area"> ... </div>

        <div class="idea-block"> ... </div>
        <div style="display: none;" class="comment-area"> ... </div>
    </div>
    <div class="col-lg-6">
        <div class="row">
            <div class="col-lg-6">
                <div class="idea-block"> ... </div>
                <div style="display: none;" class="comment-area"> ... </div>
            </div>
            <div class="col-lg-6">
                <div class="idea-block"> ... </div>
                <div style="display: none;" class="comment-area"> ... </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                [here's where to put the picture of  
                the car spanning 2 columns, so  to speak]
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="idea-block"> ... </div>
        <div style="display: none;" class="comment-area"> ... </div>

        <div class="idea-block"> ... </div>
        <div style="display: none;" class="comment-area"> ... </div>
    </div>
</div>

Make sense?

Ted
  • 14,757
  • 2
  • 41
  • 58