如何根据容器中的bootstrap调整列宽？

Question

我正在创建这样的布局：

[我在纸上的布局] [1]

但是从html和使用bootstrap我得到了如下：

http://jsfiddle.net/52VtD/7352/

<div class="container-fluid">
            <div class="row">
                <div class="col-md-2 col-lg-2  col-sm-2 col-xs-2">
                    <div class="sidemargin">
                        <%--<div>
                            <span class="verticaltextname1">Project</span>
                        </div>
                        <div>
                            <span class="verticaltextname1">Work History</span>
                        </div>--%>
                    </div>
                </div>
                <div class="col-md-8 col-lg-8  col-sm-8 col-xs-8">
                    <div class="row">
                        <div class="col-xs-3">
                            <div class="topBox">About me</div>
                        </div>
                        <div class="col-xs-3">
                            <div class="topBox">Specialization</div>
                        </div>
                        <div class="col-xs-3">
                            <div class="topBox">Awards</div>
                        </div>
                        <div class=" col-xs-3">
                            <div class="topBox">Testimonials</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3">
                            <div class="topBox">Project</div>
                        </div>
                        <div class="col-xs-3">
                            <div class="topBox">Description</div>
                        </div>
                        <div class="col-xs-3">
                            <div class="topBox">Achievements</div>
                        </div>
                        <div class="col-xs-3">
                            <div class="topBox">Clients</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="topBox">
                                WorkedAs
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="topBox">
                                Skills
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="topBox">
                                Responsibilities
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="topBox">
                                Work involved
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 col-lg-2  col-sm-2 col-xs-2">
                    <div class="sidemargin">
                    </div>
                </div>
            </div>
        </div>

http://jsfiddle.net/52VtD/7352/

如何根据我的纸淀粉调整greenyellow列，并在每个盒子之间创建相同的空间？