Geek Answers Handbook

Bootstrap 3 - long right column - partial lines

I am new to Bootstrap, but not a 12-grid system, however I am having problems implementing columns that are longer than their rows.

I searched the exhibition on the Internet, but have not yet found the answer!

I will try to compose what I am trying to achieve, even if it is possible!

Line 1: [---- 12 ----]

Line 2: [--- 9 ---] [3]

Line 3: [3] [3] [3] [_] <- continuation of the column above.

The difficulty I encountered arises in the following paragraph:

Line 1, everything is fine. Line 2, everything is in order. Row 3, when starting the first column of row three, it is placed much lower and not filled due to the long content in the right column.

I hope this makes sense, and maybe this is a simple solution, but now my head hurts, and coffee no longer has an effect!

+4
source share
1 answer

Use the socket to solve this problem: http://getbootstrap.com/css/#grid-nesting

<div class="container">
  <div class="row">
    <div class="col-sm-12"></div>
  </div>
  <div class="row">
    <div class="col-sm-9">
      <div class="row">
        <div class="col-sm-12"></div>
      </div>
      <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-4"></div>
        <div class="col-sm-4"></div>
      </div>
    </div>
    <div class="col-sm-3"></div>
  </div>
</div>

See: http://bootply.com/86710

+4
source

More articles:


All Articles