Bootstrap col-6 col-md-4 不适用于 phone

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>

所以我希望我的列在 phone 设备上是半宽的，但这没有用。 Screen of what is happening

有什么想法吗？

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

提前感谢您的所有回答:)

Answer 1

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

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

Bootstrap col-6 col-md-4 不适用于 phone

Bootstrap col-6 col-md-4 dont work on phone

twitter-bootstrap-3