Number of columns in “full-width” PSD design

问题

I have one PSD design, which 1980px (full-width), and I need to convert it to HTML, using Bootstrap 3.

I do know that Bootstrap 3 has an option to fluid grids, but my question is **how can I count number of columns needed for each section on website? **

If this is that, 1980px design:

How can I know how many columns to set for the black, red, and blue section?

回答1:

Here's an overlay of columns on your example:

So in this case, your html would look something like this:

<div class="row">
    <div class="col-sm-2">
        <p>Black Column</p>
    </div>
    <div class="col-sm-6">
        <p>Red Column</p>
    </div>
    <div class="col-sm-4">
        <p>Blue Column</p>
    </div>
</div>

See this working demo

来源：https://stackoverflow.com/questions/28633735/number-of-columns-in-full-width-psd-design