删除twitter bootstrap中的额外空间

时间:2014-11-30 16:57:02

标签: html5 twitter-bootstrap-3

我想删除顶部和底部图像之间的额外空间。我的代码是

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>home</title>

        <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="container">



    <div class="col-md-3 post-col">

            <img src="home-1.jpg" alt="" class="post-image"/>
        <div class="col-md-12">

            <h5>2 days ago by Admin</h5>
            <h4>Post title</h4>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
        </div>

    </div>

    <div class="col-md-3 post-col">

        <img src="home-1.jpg" alt="" class="post-image"/>
        <div class="col-md-12">

            <h5>2 days ago by Admin</h5>
            <h4>Post title</h4>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
        </div>

    </div>
    <div class="col-md-3 post-col">

        <img src="home-1.jpg" alt="" class="post-image"/>
        <div class="col-md-12">

            <h5>2 days ago by Admin</h5>
            <h4>Post title</h4>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>

        </div>

    </div>
    <div class="col-md-3 post-col">

        <img src="home-1.jpg" alt="" class="post-image"/>
        <div class="col-md-12">

            <h5>2 days ago by Admin</h5>
            <h4>Post title</h4>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
        </div>

    </div>
    <div class="col-md-3 post-col">

        <img src="home-1.jpg" alt="" class="post-image"/>
        <div class="col-md-12">

            <h5>2 days ago by Admin</h5>
            <h4>Post title</h4>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
        </div>

    </div>
    <div class="col-md-3 post-col">

        <img src="home-1.jpg" alt="" class="post-image"/>
        <div class="col-md-12">

            <h5>2 days ago by Admin</h5>
            <h4>Post title</h4>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
        </div>

    </div>
    <div class="col-md-3 post-col">

        <img src="home-1.jpg" alt="" class="post-image"/>
        <div class="col-md-12">

            <h5>2 days ago by Admin</h5>
            <h4>Post title</h4>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
            <p>Post description here Post description herePost description herePost description
                herePost description herePost description here</p>
        </div>

    </div>

</div>

    <script src="js/jquery-2.1.1.min.js"></script>

    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

运行代码后,结果看起来像.. enter image description here

我面临的问题!

如上图所示,顶行第3张图像与第3张图像之间存在较大间隙,但我希望图像低于其他图像,不保留额外空间。

Link显示了我想要的示例示例.....

1 个答案:

答案 0 :(得分:-1)

使用砌体将解决问题。