<meta charset="UTF-8">
<title>四列等框</title>
<style type="text/css">
    *{margin: 0;padding:0;}
    .wrap{
        display: flex;
        height: 400px;
    }
    .wrap p{
        background: blue;
        flex: 1;
    }
    .wrap p+p{
        margin-left: 10px;
    }
</style>
<p class="wrap">
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <p>p4</p>
    </p>    

</body>

你可以这样试试：（假设外层容器的宽度为100%），
.wrap p{

    background: blue;
    float:left;
    width:20%;
    height:100%;
    margin:0 2.5%;
}

bootstrap的栅格系统