一个项目在bootstrap响应网格中不合适

时间:2014-05-28 04:38:35

标签: html css twitter-bootstrap responsive-design

我正在制作一个以四位创始人的肖像为特色的页面。它们应该在大屏幕上出现在一行中,然后在中等屏幕上出现在两行中。但是,当我调整浏览器大小时,最终的肖像将不对齐地发送到页面底部,我不知道为什么。

<div class="container">

    <div class="row">

        <div class="col-lg-12">
            <h1 class="page-header">Meet Our Collaborators</h1>
            <p>Relay has really good dancers. This is placeholder copy. Our dancers are so great. They have been to all sorts of school and done all sorts of performances.</p>
        </div>

        <div class="col-lg-12">
            <h2>Our Founders</h2>
        </div>

    </div> <!-- /row -->

    <div class="row">

        <div class="col-lg-3 col-md-6 col-sm-6 centered">
            <img class="img-founder" src="img/founder1.png">
            <h3>Founder1</h3>
            <p>What does this team member do? Keep it short!</p>
        </div>

        <div class="col-lg-3 col-md-6 col-sm-6 centered">
            <img class="img-founder" src="img/founder2.png">
            <h3>Founder 2</h3>
            <p>What does this team member do? Keep it short!</p>
        </div>

        <div class="col-lg-3 col-md-6 col-sm-6 centered">
            <img class="img-founder" src="img/founder3.png">
            <h3>Founder 3</h3>
            <p>What does this team member do? Keep it short!</p>
        </div>

        <div class="col-lg-3 col-md-6 col-sm-6 centered">
            <img class="img-founder" src="img/founder4.png">
            <h3>Founder 4</h3>
            <p>What does this team member do? Keep it short!</p>
        </div>

    </div> <!-- /row -->

</div> <!-- /container -->

img-founder类的css只是bootstrap中的img-responsive类,margin-left和margin-right设置为auto,问题发生在我做出改变之前。

我尝试发布截图但我没有足够的声誉。我希望这是足够有用的信息,我很感激帮助。

感谢。

0 个答案:

没有答案