当窗口调整大小时,div内的内容不会溢出Bootstrap

时间:2013-05-03 10:22:49

标签: html twitter-bootstrap responsive-design

我正在尝试使用Bootstrap构建一个网站。到目前为止,我面临的问题是,当窗口调整大小时,并排的span8和span4溢出(不知道确切的术语。)但内部的内容不是。我会粘贴我的HTML,请查看它并帮助我解决问题。

<div class="main">
    <section id="content" class="border">
        <div class="container-fluid">
            <div class="row">
                <div class="span8">
                    <div class="left-1 page1-col1">
                        <h2 class="h2">Welcome to our website!</h2>
                          <div class="page1-img1"></div>
                        <p class="color-1 p2">We represent a team of bright experiencedprofessionals moving towards a common goal of achieving excellence and beyond. </p>
                        <p class="color-1 p2">We are IT professional firm providing high quality results to our clients all time.</p>
                        <p class="color-1 p2">Consulace Business Solutions emphasis quality delivery, quick turnaround and maintaining service level agreements.</p>

                        <p class="color-1 p2">We spend a great deal of time learning about our client’s requirement, their focus and expectations, which enables us to match the talent with our client’s requirements and deliver high quality right first time. </p>
                        <p class="color-1 p2">Our expertise in Microsoft, Open Source and Mobile Platform technologies, which will help our clients to leverage the solutions being implemented easily across different technological platforms.</p>
                    </div>



                </div>
                <div class="span4">
                    <div class="tabs">
                        <ul class="nav">
                            <li class="selected"><a href="#tab-1">Latest</a></li>
                            <li><a href="#tab-2">Popular</a></li>
                            <li><a href="#tab-3">All News</a></li>
                        </ul>
                        <div id="tab-1" class="tab-content">
                            <div class="inner">
                                <div class="wrap block-3 border-1">
                                    <img src="Images/page1-img2.jpg" alt="" class="img-indent" />
                                    <div class="extra-wrap">
                                        <p class="color-1">Duis autem veeum iriure dolor hendrerit.</p>
                                        <p>Molestie consequat, vel nulla facilisis at vero eros etaccumsan et iusto.</p>
                                        <p class="color-2"><time datetime="2012-02-18">18-02-2012</time><a href="#" class="link">Read more</a></p>
                                    </div>
                                </div>
                                <div class="wrap block-3">
                                    <img src="Images/page1-img3.jpg" alt="" class="img-indent" />
                                    <div class="extra-wrap">
                                        <p class="color-1">At vero eos et accusam et justoduo.</p>
                                        <p>Dolores et ea rebum. Stet clita kasd gubergren, no seatakimata sanctus.</p>
                                        <p class="color-2"><time datetime="2012-02-18">18-02-2012</time><a href="#" class="link">Read more</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="tab-2" class="tab-content">
                            <div class="inner">
                                <div class="wrap block-3 border-1">
                                    <img src="Images/page1-img3.jpg" alt="" class="img-indent" />
                                    <div class="extra-wrap">
                                        <p class="color-1">At vero eos et accusam et justoduo.</p>
                                        <p>Dolores et ea rebum. Stet clita kasd gubergren, no seatakimata sanctus.</p>
                                        <p class="color-2"><time datetime="2012-02-18">18-02-2012</time><a href="#" class="link">Read more</a></p>
                                    </div>
                                </div>
                                <div class="wrap block-3">
                                    <img src="Images/page1-img2.jpg" alt="" class="img-indent" />
                                    <div class="extra-wrap">
                                        <p class="color-1">Duis autem veeum iriure dolorhendrerit.</p>
                                        <p>Molestie consequat, vel nulla facilisis at vero eros etaccumsan et iusto.</p>
                                        <p class="color-2"><time datetime="2012-02-18">18-02-2012</time><a href="#" class="link">Read more</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="tab-3" class="tab-content">
                            <div class="inner">
                                <div class="wrap block-3 border-1">
                                    <img src="Images/page1-img2.jpg" alt="" class="img-indent" />
                                    <div class="extra-wrap">
                                        <p class="color-1">Dolor hendrerit duis autem veeum iriure.</p>
                                        <p>Eros et accumsan et iusto molestie consequat, vel nullafacilisis at vero.</p>
                                        <p class="color-2"><time datetime="2012-02-18">18-02-2012</time><a href="#" class="link">Read more</a></p>
                                    </div>
                                </div>
                                <div class="wrap block-3">
                                    <img src="Images/page1-img3.jpg" alt="" class="img-indent" />
                                    <div class="extra-wrap">
                                        <p class="color-1">Accusam et justo duo at vero eoset.</p>
                                        <p>Stet clita kasd gubergren, no sea takimata sanctus.Dolores et ea rebum. </p>
                                        <p class="color-2"><time datetime="2012-02-18">18-02-2012</time><a href="#" class="link">Read more</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </section>
</div>

0 个答案:

没有答案