Question

我想为我的页面创建以下布局：

是否可以使用boostrap创建它？我看到只有flexbox或自定义css的帮助才有可能。

Answer 1

尝试使用bootstrap ..

<style>
    .small-div{
        border: 2px solid #000;
        margin-bottom: 10px;
        height: 25px;
    }
    .big-div{
        border: 2px solid #000;
        height: 100px;
    }
</style>

<body>
<div class="container">
    <div class="col-md-2">
        <div class="col-md-12 small-div">Div 1</div>
        <div class="col-md-12 small-div">Div 2</div>
        <div class="col-md-12 small-div">Div 3</div>
    </div>
    <div class="col-md-10">
        <div class="col-md-12 big-div">Div 4</div>
    </div>

</div>
</body>

Answer 2

＆＃13;

.left-box{
        border: 2px solid #000;
        margin: 2% 0%;
        height: 75px;
        width: 100%;
    }
.right-box{
        border: 2px solid #000;
        height: 225px;
        width: 100%;
        margin: 1% 0%;
    }

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
    <div class="col-sm-2">
        <div class="col-xs-12 left-box">Div 1</div>
        <div class="col-xs-12 left-box">Div 2</div>
        <div class="col-xs-12 left-box">Div 3</div>
    </div>
    <div class="col-sm-10">
        <div class="col-xs-12 right-box">Div 4</div>
    </div>

</div>
</body>

＆＃13;

就像bootstrap中的垂直行一样

2 个答案: