html - 如何将col调整为行？

Question

我在页面中有一个网格系统，我希望一行在其中包含 2 个列。列比行大。

JSFIDDLE

示例：如果行有 20px 的高度，那么 cols 也是如此。

我希望 cols 适应行，而不是独立行动。

<!--HTML-->
<div class="container-fluid">
      <div class="row">
        <div class="col-4"><img src="https://www.w3schools.com/images/w3schools_green.jpg"></div>
        <div class="col-8">
              dhfjk
              <br>fudff
              <br>udfhjdkl
        </div>
      </div>
</div>

/*CSS*/
.col-4{
    text-align: center; 
    padding: 0%;
}

.col-4{
    border: 3px red solid;
}

.col-8{
    border: 3px blue solid;
}

.container-fluid{
    padding: 50px;
}

.row{
    border: 5px solid green;
    max-height: 50px;
}

标签： htmlcssbootstrap-4grid-system

Answer 1

只需使用这个 css

/*CSS*/
.col-4{
    text-align: center; 
    padding: 0%;
}

.col-4{
    border: 3px red solid;
     padding: 7px;
}

.col-8{
    border: 3px blue solid;
}

.container-fluid{
    padding: 50px;
}

.row{
    border: 5px solid green;
    max-height: 200px;
}