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。
这意味着所有列类名末尾的数字总应等于12。
col-sm- 数字

例如：

<div class="row">
    <div class="col-sm-6">
        Column Left
    </div>
    <div class="col-sm-6">
        Column Right
    </div>
    <!-- Above both column class names end with 6, which adds up to 12 -->
</div>

<!-- Below is another example of the same concept -->
<div class="row">
    <div class="col-sm-4">
        Column Left
    </div>
    <div class="col-sm-4">
        Column Middle
    </div>
    <div class="col-sm-4">
        Column Right
    </div>
    <!--Above each of the 3 column class names end with 4 which adds up to 12-->
</div>
<!--Note that the sizes of the columns don't have to be the same.-->
<!--This means that the number at the end can vary from column to column-->

现在回答您有关如何更改div的宽度和高度的问题。

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

1。使用内置的引导程序类。
Bootstrap具有内置的类，可让您更改div的大小。
唯一的问题是它只允许将宽度/高度更改为屏幕宽度的25％，50％，75％或100％。
因此，如果您想更详细地了解div的宽度/高度，那么这不是最佳选择。

这是应用内置类的方法：

<div class="w-25"></div><!--Set the width to 25% of screen width -->
<div class="w-50"></div><!--Set the width to 50% of screen width -->
<div class="w-75"></div><!--Set the width to 75% of screen width -->
<div class="w-100"></div><!--Set the width to 100% of screen width -->

<!--To set the height replace "w" with "h" -->

2。在div标签中使用样式属性
现在，假设您要指定div的宽度/高度，这就是方法
您要做的就是在div中添加style属性，并使用百分比，像素或em设置宽度/高度。

例如：

<div style="width:100px;"></div><!--Set width to 100 pixels-->
<div style="width:40%;"></div><!--Set width to 40% of the screen width-->
<div style="width: 20em;"></div><!--Set width to 20em of the screen width-->

<!-- To set the height replace "width" with "height" -->

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

如何更改bootstrap div的高度和宽度？

2 个答案: