bootstrap无法获得正确的设计

Question

我正在从bootstrap创建基本布局，

我画的图像是这样的：

http://oi62.tinypic.com/2a7sawn.jpg

我写了这样的HTML：

<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="mainContent">
                        <div class="row">
                            <div class="col-md-12 col-lg-12  col-sm-12 col-xs-2">
                                <div class="row">
                                    <div class="col-md-6 col-lg-6  col-sm-6 col-xs-6">
                                        <div class="topBox">About me</div>
                                    </div>
                                    <div class="col-md-6 col-lg-6  col-sm-6 col-xs-6">
                                        <div class="topBox">Specialization</div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3 col-lg-3  col-sm-3 col-xs-2">
                                        <div class="topBox">Awards</div>
                                    </div>
                                    <div class="col-md-3 col-lg-3  col-sm-3 col-xs-2">
                                        <div class="topBox">Testimonials</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-lg-6  col-sm-6 col-xs-12">
                                <div class="row">
                                    <div class="col-md-6 col-lg-6  col-sm-6 col-xs-12">
                                        <div class="topBox">Project</div>
                                    </div>
                                    <div class="col-md-6 col-lg-6  col-sm-6 col-xs-12">
                                        <div class="topBox">Description</div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 col-lg-12  col-sm-12 col-xs-12">
                                        <div class="topBox">
                                            WorkedAs
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 col-lg-12  col-sm-12 col-xs-12">
                                        <div class="topBox">
                                            Responsibilities
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-6  col-sm-6 col-xs-12">
                                <div class="row">
                                    <div class="col-md-6 col-lg-6  col-sm-6 col-xs-12">
                                        <div class="topBox">Achievement</div>
                                    </div>
                                    <div class="col-md-6 col-lg-6  col-sm-6 col-xs-12">
                                        <div class="topBox">Client</div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 col-lg-12  col-sm-12 col-xs-12">
                                        <div class="topBox">
                                            Skills
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 col-lg-12  col-sm-12 col-xs-12">
                                        <div class="topBox">
                                            WorkInvolved
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="topBox">
                                Jquery Carousal
                            </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>

我的问题是，根据我的纸质图纸，我无法获得正确的设计，而且我也不知道我写的HTML是否正确

Answer 1

好的，这是一个部分小提琴，希望能帮到你的路上：

JSFiddle

                                <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>