如何更改引导程序div的高度和宽度？

Question

this the output这是我的代码。我想同时更改div的高度和宽度。我尝试更改但不起作用。

@media(max-width: 500px) {
  .col-sm-4 {
    height: 50px;
	width: 50px;
  }
}

<div class="container-fluid">
    <div class="row">
<div class="col-sm-4">
          container left
 <img src="5.jpg" class="img-circle" alt="Cinque Terre"> 
</div><div class="col-sm-4">
Container Right
<img src="5.jpg">
 </div>
    </div>
</div>

Answer 1

您的代码有很多问题。首先，您行中各列的大小总和必须为12。例如，

<div class="row">
    <div class="col-sm-6">


</div>

Answer 2

<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>


<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
</div>

更多信息：Bootstrap sizing