如何在CSS或引导程序中创建自定义列

Question

我通常使用bootstrap列和网格，但是直到今天，我尝试做一些完全不同的事情，并意识到我对bootstrap不太满意

我正在尝试实现如图所示的一列，该列在左侧小于一个完整高度，在右侧小于两个半高度

<div class="container-fluid col-md-12">
    <div class="col-md-6">
    </div>
    <div class="col-md-6">
    </div>
</div>

所以我在上面的代码中有类似的东西，我们都知道可以并排提供两个相等的高度和宽度的列，但是我如何操纵它来给出图像中想要的？

注意：我要在所有三列中放入图像

Answer 1

只需在第二个col-md-6 div中添加两个block div-剩下的就是CSS

<div class="container-fluid col-md-12">
    <div class="col-md-6">
    </div>
    <div class="col-md-6">
        <div class="block">
        </div>
        <div class="block">
        </div>
    </div>
</div>

在这里查看小提琴

Answer 2

如果使用的是Bootstrap4，则需要添加.row div，然后在该列上使用flexbox实用程序类。

 .col-sm-6 { border: 1px solid grey; } .col-sm-6 div { border: 1px solid red; flex: 1; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-sm-6">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia, quisquam. In unde sint dolor. Suscipit accusantium accusamus nemo minima Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio quam ipsam labore neque maxime reiciendis iste, commodi aut cumque perferendis quaerat sed nisi, minus vero doloribus, quis iure? Quasi commodi nisi quos dicta pariatur voluptatem delectus facere tempore expedita blanditiis ducimus eaque iste reprehenderit voluptatum, natus reiciendis suscipit tempora voluptas? </div> <div class="col-sm-6 d-flex flex-column"> <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit, deleniti? </div> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, inventore. </div> </div> </div> </div> 

Answer 3

我建议将第二列分为另外两个部分。

 .container-fluid { background: #7F3300; padding: 35px; } div { border: 1px solid black; padding: 0; } .column-1 { background: #808080; padding: 35px; } .column-2 { background: #007F7F; padding: 35px; } .column-3 { background: #FF7F7F; padding: 35px; } img { width: 100%; } 

 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> <div class="container-fluid col-md-12"> <div class="row"> <div class="col-6 column-1"> <img src="//via.placeholder.com/350x150"> </div> <div class="col-6"> <div class="col-md-12 column-2"> <img src="//via.placeholder.com/350x150"> </div> <div class="col-md-12 column-3"> <img src="//via.placeholder.com/350x150"> </div> </div> </div> </div> 

编辑：我已经添加了一些图像，向您展示了您可以如何做。

Answer 4

用CSS尝试

.container-fluid .col-md-12{
       width:100%;
       height:100px;
       background-color:brown;
       background-border:none;
}
.col-md-6{
       width:40px;
       height:50px;
       background-color:green;
       background-border:none;
       float:right;
}
.col-md-6.1{
      background-color:green;
}
.col-md-6.2{
      background-color:pink;
}
.col-md-7{
       width:80px;
       height:100px;
       background-border:none;
       float:left; 
       padding-right:30px;
}

像这样编辑您的HTML代码

<div class="container-fluid col-md-12">
    <div class="col-md-7">
    </div>
    <div class="col-md-6 col-md-6.1">
    </div>
    <div class="col-md-6 col-md-6.2">
    </div>
</div>