Bootstrap col-6 col-md-4在手机上不起作用。

Question

嗨，第一次在这里发帖，所以要温柔点:D。

我正在做我的响应式设计，发生了这种情况。这是我的代码。

<div class="col-6 col-md-4 expertise">
<img src="<?= $value["skill_image"] ?>">
<h5>
    <?= $value["skill_name"] ?>
</h5>
<?php
for ($i = 0; $i < $value["skill_level"]; $i++) {
    ?>
    <span class="fa fa-star checked"></span>
<?php
}
for ($i; $i < 5; $i++) {
    ?>
        <span class="fa fa-star"></span>
    <?php
}
?>
</div>

所以，我希望我的列在手机设备上是一半的宽度，但没有工作。发生的画面

任何想法？

如果你想在网站上看看。https:/portfolio-sigier.com。

提前感谢大家的解答:)

Answer 1

你需要一个定义宽度和比例的视口元标签。添加以下内容到您的 head.

<meta name="viewport" content="width=device-width, initial-scale=1">