Geek Answers Handbook

Click the bootstrap footer?

Is it possible to populate Twitter Bootstrap columns without breaking the grid? I create a design that is centered around the “drawers”.

I made a fiddle from 3 examples: http://jsfiddle.net/w7zS3/1/

    <div class="row">
      <div class="col-xs-4 box">content...</div>
      <div class="col-xs-4 box">content...</div>
      <div class="col-xs-4 box">content...</div>
    </div>

    <hr>

    <div class="row">
      <div class="col-xs-4">
          <div class="box">content...</div>
       </div>
      <div class="col-xs-4">
          <div class="box">content...</div>
      </div>
      <div class="col-xs-4">
          <div class="box">content...</div>
      </div>
    </div>

    <hr>

    <div class="row">
      <div class="col-xs-4">
          <div class="box-padded">content...</div>
      </div>
      <div class="col-xs-4">
          <div class="box-padded">content...</div>
      </div>
      <div class="col-xs-4">
          <div class="box-padded">content...</div>
      </div>
    </div>

    <hr>

    <div class="row box">
      <div class="col-xs-6">
         header: logo
      </div>
      <div class="col-xs-6">
          header: ad banner
      </div>
    </div>

  </div>

The first is the most semantic, but the addition of a background color enters the fill, creating the illusion of a single “box”.

Throwing another div there with the background works well, but the text touches the edge of the window, which doesn't look very good.

In the third example, I’m already laid out in the DIV and while it works, it technically breaks Twitter bootstraps of the design pattern ... if I had to say, the grid socket will not work due to laying up, taking up space.

, ( ), : 6 6 .. , (.... )... , . (, )

?

+4
1

, , .

<div class="col-xs-4">
    <div class="box">content...</div>
</div>

:

<div class="col-xs-4">
    <div class="box row">
        <div class="col-xs-1"></div>
        <div class="col-xs-10">content</div>
        <div class="col-xs-1"></div>
    </div>
</div>

. : http://jsfiddle.net/w7zS3/3/

( , )

+4

More articles:


All Articles