Question

我正在尝试调整我的＆＃34;卡＆＃34;从手机上看垂直时，我似乎无法正确使用语法。我尝试了＃text-align：center;＆＃39;浮：无＆＃39;除了其他尝试，但我似乎无法弄明白。任何帮助将不胜感激。谢谢。

＆＃13;

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {  
    .card {
        display: block;
        float: none;
        width: 100%;
        text-align: center;
    }
}

＆＃13;

<div class="card">
            <img src="img/websume.png" height="240" width="356" alt="Card image cap">
            <p class="card-text">My "Web-sume" was my first site to include Bootstrap 4. The site is a responsive site, with a feature only available to moblie devises. The site consist of mostly Bootstrap custom layouts.</p>
          </div>
          <div class="card">
            <img src="img/websume_drpdwn.png" height="240" width="356" alt="Card image cap">
            <p class="card-text">The "Web-sume" has several fixed images as well as a drop down section which includes my address as well as social links. I used the -web kit layouts for the 'Experience' section of the site.</p>
          </div>
          <div class="card">
            <img src="img/websume_exp.png" height="240" width="356" alt="Card image cap">
            <p class="card-text">As mentioned before, the site, when viewed through a mobile devise has a feature where if a client wants to get in contact with me they do not have to scroll all the way to the bottom of the page to get my contact information, a 'email' and 'phone' button appears for easy access.</p>
</div>

＆＃13;

Answer 1

如果我正确理解了问题，那么您的卡片将离开屏幕边缘。这是因为当您为移动设备设置.card的宽度为100％时，您在图像的宽度上进行硬编码，而不是实际强制图像包含在图像的宽度内。各自.card容器的界限。

更正此问题的最佳方法是为所有图像指定最大宽度：

img {
  max-width: 100%;
}

请注意，您可能还想设置height: auto，以确保图像不会被压扁：

@media (max-width: 575px) {  
    img {
        height: auto;
    }
}

我创造了一个展示这个here的小提琴。

希望这有帮助！：）

Answer 2

只是一个简单的疏忽 - 它是破坏@media查询的CSS评论。您最初使用// Extra small devices (portrait phones, less than 576px)，而在CSS中，注释语法为/* Extra small devices (portrait phones, less than 576px) */

垂直对齐

2 个答案: