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中添加两个块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>

签出fiddle here

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

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

{2,30}

.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%;
}

编辑：：我已经添加了一些图像，向您展示了如何执行此操作。

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>

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

4 个答案: